微信小程序Banner实现

1.小程序实现Banner图

微信小程序实现Banner相对于Android实现Banner来说非常便捷的，如图：

2.在.js中定义数据源如下：

Page({

/**
* 页面的初始数据
*/
data: {
// Banner数据
images:[
"http://img.zcool.cn/community/014056564bd8596ac7251c94eb5559.jpg",
"http://img.zcool.cn/community/01e03b58047e96a84a0e282b09e8fc.jpg",
"http://pic.90sjimg.com/back_pic/00/00/69/40/d678a42886e0232aaea0d6e69e9b1945.jpg",
"http://img.zcool.cn/community/0132dd55800bc700000059ffbe83e9.jpg@1280w_1l_2o_100sh.jpg",
"http://img.zcool.cn/community/0154755a2df102a80120ba3828b5af.jpg@1280w_1l_2o_100sh.jpg",
"http://pic.90sjimg.com/back_pic/00/00/69/40/bf4f8e2ab7e05dc3c7cc2a7f7e9c2fe7.jpg",
"http://img.zcool.cn/community/01a2a2594943d3a8012193a328e0fd.jpg@1280w_1l_2o_100sh.jpg"
],
// 是否显示面板指示点
indicatorDots: true,
// 滑动方向是否为纵向
vertical: false,
// 自动切换
autoplay: true,
// 采用衔接滑动
circular: true,
// 自动切换时间间隔2s
interval: 2000,
// 滑动动画时长0.5s
duration: 500,
// 前边距，可用于露出前一项的一小部分，接受 px 和 rpx 值
previousMargin: 0,
// 后边距，可用于露出后一项的一小部分，接受 px 和 rpx 值
nextMargin: 0
},
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
3.在.wxss编写组件样式如下：

.swiper-item-images{
width: 100%;
height: 300rpx;
}
1
2
3
4
4.在.wxml中具体使用

<swiper indicator-dots="{{indicatorDots}}"
autoplay="{{autoplay}}"
circular="{{circular}}"
vertical="{{vertical}}"
interval="{{interval}}"
duration="{{duration}}"
previous-margin="{{previousMargin}}px"
next-margin="{{nextMargin}}px">

<block wx:for='{{images}}' wx:key='index'>
<swiper-item>
<image src='{{item}}' mode='aspectFill' class='swiper-item-images'/>
</swiper-item>
</block>

</swiper>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
点赞 1
————————————————
版权声明：本文为CSDN博主「秦川小将」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/mjb00000/java/article/details/90516462