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