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 }