<!-- wxml -->
<swiper class='u-wrp-bnr' indicator-dots='true' autoplay='true' interval='5000' duration='1000' circular='true'>
<block wx:for="{{bnrUrl}}" wx:for-index="index">
<swiper-item>
<image src='{{item.url}}' class='u-img-slide' mode='aspectFill'></image>
</swiper-item>
</block>
</swiper>
<!-- wxml -->
//js
Page({
data: {
"bnrUrl": [{
"url": "img/1242x366-1531449084.jpg"
}, {
"url": "img/1242x366_djj_0706-1530871651.jpg"
}, {
"url": "img/1242x366_lyx_0709-1531122892.jpg"
}, {
"url": "img/14540040236323_1_o.jpg"
}]
}
});
//js
.u-wrp-bnr {
width: 100%;
height: 200rpx;
display: block;
position: relative;
top: 100rpx;
background: #f0f0f0;
}
.u-img-slide {
width: 100%;
height: inherit;
}
//wxss
主要用到了几个属性：
属性 功能
indicator-dots='true' 面板指示圆点
autoplay='true' 自动播放
interval='5000' 每次轮播间隔
duration='1000' 轮播动画时长
circular='true' 无缝衔接
