微信小程序之--->轮播图制作 - 烙心

 1 <view class=\'content\'>
 2     <view class=\'swiper\'>
 3       <swiper indicator-dots="{{indicatorDdots}}" autoplay="{{autoplay}}" interval="{{interval}}" autoplay="{{autoplay}}">
 4         <block wx:for="{{bannerUrl}}" wx:key="unique">
 5           <swiper-item>
 6             <block wx:if="item">
 7               <image src=\'{{item}}\'></image>
 8             </block>
 9             <block wx:else>
10               <image src=\'../../images/default_pic.png\'></image>
11             </block>
12           </swiper-item>
13         </block>
14       </swiper>
15     </view>
16 
17 </view>

html

 1 .content{
 2   height: 100%;
 3   /*进行弹性布局*/
 4   display: flex;
 5   /* 纵向排列 */
 6   flex-direction: column;
 7 }
 8 .page{
 9   width: 100%;
10   display: flex;
11   flex-direction: column;
12 }
13 .swiper{
14   width: 100%;
15   margin: 0rpx;
16 
17 }
18 .swiper image{
19   display: inline-block;
20   width: 100%;
21   height: 380rpx;
22 }

 1 /*把里面的js写在另一个 以页面*/
 2 //轮播图的数据
 3 function banner(){
 4   var bannerImg=[
 5    \'http://k.zol-img.com.cn/sjbbs/7692/a7691515_s.jpg\',
 6     "../../images/1.jpg",
 7     "../../images/2.jpg",
 8     "../../images/3.jpg"
 9   ]
10     //返回数据
11   return bannerImg
12   
13 }
14 
15 /*对接口的暴露*/
16 module.exports={
17 
18 banner:banner
19 
20 
21    }

 1 /*引入js*/
 2 //fileData 名字自定义  ,我这里因为从utlIs里面引入的,所以
 3   var fileData=require(\'../../utils/data.js\')
 4   
 5 
 6  data:{
 7 
 8 
 9       indicatorDdots:true,
10    //从data.js引入函数
11     bannerUrl:fileData.banner(),
12     autoplay:true,
13     interval:5000,
14     autoplay:true,
15 
16       }