258资源分享网

swiper，关于滑块的一些效果无缝，断点，视差等等...我想这里就不用做太多的赘述，这里给大家分享一下实战项目中使用circular（衔接）的一点小特性、小技巧，当然你也可以理解为遇到了一个小坑，因为不能把整个项目搬上来，所以这里用一个小事例去简单的描述一下。

swiper滑块视图容器（轮播效果）

这里只简单列出示例中所需的一些属性，如需了解更多 【请点击，了解更多详情】

indicatorDots: true, // 是否显示面板指示点 autoplay: false, // 是否自动切换 circular: true, // 是否采用衔接滑动 current: 0, // 当前所在页面的 index interval: 500, // 自动切换时间间隔 duration: 500 // 滑动动画时长

类答题效果，答对本题自动跳转下一题，并保持滑块的衔接效果（这里我们用按钮来代替自动跳转）

<page> <view class='wrap-swiper'> <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{circular}}" current="{{current}}" bindchange='testDetails' indicator-active-color='#fff'> <block wx:for="{{imgUrls}}" wx:key="key"> <swiper-item> <image src=http://www.yiyongtong.com/archives/"https:/user-gold-cdn.xitu.io/2018/1/15/160f8b440965adf5" class="slide-image" width="355" height="150" /> </swiper-item> </block> </swiper> <view class="wrap"> <button bindtap='nextPage'>跳转下一题</button> </view> </view> </page>

swiper{ width: 80%; margin: 0 auto; margin-top: 20%; padding-top: 25px; } .wrap{ display: flex; justify-content: space-around; margin-top: 25px; } .wrap-swiper{ background: rgba(0,0,0, 0.1) ; padding-bottom: 25px; margin-left: 15px; margin-right: 15px; }

Page({ data: { imgUrls: [ '', '', '' ], indicatorDots: true, // 是否显示面板指示点 autoplay: false, // 是否自动切换 circular: true, // 是否采用衔接滑动 current: 0, // 当前所在页面的 index interval: 500, // 自动切换时间间隔 duration: 500 // 滑动动画时长 }, testDetails (e) { // bindchange事件 console.log(e) }, nextPage () { // 跳转下一题 let current = this.data.current current++ if (current > 2) { current = 0 } } })