- 最近编写微信小程序,发现小程序自带的轮播方式轮播到最后一张图后会倒回到第一张图片,进行重新轮播,这种方式看起来十分变扭,所以在万能的网上搜索了一下解决方案,并记录如下:
index.wxml:
<swiper class="banner" indicator-dots="true" circular="true" autoplay="true" interval="3000" duration="1000">
<swiper-item wx:for="{{banner}}" wx:key="id">
<image src="{{item.url}}" background-size="cover"></image>
</swiper-item>
</swiper>
index.wxss:
.banner {
width: 750rpx;
height: 417rpx;
}
.banner image {
width: 100%;
height: 417rpx;
}
index.json
{
"navigationBarTitleText": "首页",
}
index.js
Page({
data: {
brands: [ {
url : "http://yanxuan.nosdn.127.net/65091eebc48899298171c2eb6696fe27.jpg"
}]
},
其中 circular=“true” 的作用就是让轮播图流畅的播放,其他的属性是轮播几秒一次等等;