微信小程序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