小程序內(nèi)置組件swiper，circular（銜接）使用小技巧
|
swiper，關(guān)于滑塊的一些效果無縫，斷點(diǎn)，視差等等...我想這里就不用做太多的贅述，這里給大家分享一下實(shí)戰(zhàn)項(xiàng)目中使用circular（銜接）的一點(diǎn)小特性、小技巧，當(dāng)然你也可以理解為遇到了一個(gè)小坑，因?yàn)椴荒馨颜麄€(gè)項(xiàng)目搬上來，所以這里用一個(gè)小事例去簡單的描述一下。 功能介紹swiper滑塊視圖容器（輪播效果） 可配置項(xiàng)這里只簡單列出示例中所需的一些屬性，如需了解更多 【請點(diǎn)擊，了解更多詳情】
indicatorDots: true, // 是否顯示面板指示點(diǎn)
autoplay: false, // 是否自動(dòng)切換
circular: true, // 是否采用銜接滑動(dòng)
current: 0, // 當(dāng)前所在頁面的 index
interval: 500, // 自動(dòng)切換時(shí)間間隔
duration: 500 // 滑動(dòng)動(dòng)畫時(shí)長
示例場景類答題效果，答對(duì)本題自動(dòng)跳轉(zhuǎn)下一題，并保持滑塊的銜接效果（這里我們用按鈕來代替自動(dòng)跳轉(zhuǎn)） WXML：
<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="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'>跳轉(zhuǎn)下一題</button>
</view>
</view>
</page>
WXSS：
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;
}
JS:
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: true, // 是否顯示面板指示點(diǎn)
autoplay: false, // 是否自動(dòng)切換
circular: true, // 是否采用銜接滑動(dòng)
current: 0, // 當(dāng)前所在頁面的 index
interval: 500, // 自動(dòng)切換時(shí)間間隔
duration: 500 // 滑動(dòng)動(dòng)畫時(shí)長
},
testDetails (e) {
// bindchange事件
console.log(e)
},
nextPage () {
// 跳轉(zhuǎn)下一題
let current = this.data.current
current++
if (current > 2) {
current = 0
}
}
})
運(yùn)行效果:
對(duì)比通過上述，首先我們看到，當(dāng)我們左右滑動(dòng)時(shí)候，銜接效果是沒有毛病的，但是當(dāng)我們?nèi)ツM跳轉(zhuǎn)的時(shí)候，問題出現(xiàn)了，銜接失效？這究竟是怎么回事呢？現(xiàn)在我們就來看一下在bindchange事件（testDetails）的兩次log中發(fā)生了什么？ 問題
如上圖所屬，source（來源） 出現(xiàn)問題，模擬跳轉(zhuǎn)改變current方式改變了內(nèi)部銜接跳轉(zhuǎn)的機(jī)制，那既然知道原因，那下一步的就要考慮如何模擬swiper內(nèi)部的機(jī)制動(dòng)作，那又該如何模擬呢？就要從autoplay這個(gè)內(nèi)置屬性操刀了，廢話不說直接上代碼！ JS（修改后）小特性： 主動(dòng)觸發(fā)swiper的autoplay特性，檢測bindchange事件的source來源，做動(dòng)態(tài)動(dòng)態(tài)關(guān)閉處理
Page({
data: {
imgUrls: [
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
],
indicatorDots: true, // 是否顯示面板指示點(diǎn)
autoplay: false, // 是否自動(dòng)切換
circular: true, // 是否采用銜接滑動(dòng)
current: 0, // 當(dāng)前所在頁面的 index
interval: 500, // 自動(dòng)切換時(shí)間間隔
duration: 500 // 滑動(dòng)動(dòng)畫時(shí)長
},
testDetails (e) {
console.log(e)
if (e.detail.source == 'autoplay') {
this.setData({
autoplay: false
})
}
},
nextPage () {
// 跳轉(zhuǎn)下一題
this.setData({
autoplay: true
})
}
})
對(duì)比log（修改后）
運(yùn)行效果（修改后）跑起來瞅一眼
總結(jié)本篇文章更多的是對(duì)于一些用法的分享，簡單的特性說明，更深層次的內(nèi)容，有興趣的道友還是可以去研究下的，另外歡迎大家關(guān)注點(diǎn)贊，多謝?。ǔ掷m(xù)更新中...） |
