swiper,關於滑塊的一些效果無縫,斷點,視差等等...我想這裏就不用作太多的贅述,這裏給你們分享一下實戰項目中使用circular(銜接)的一點小特性、小技巧,固然你也能夠理解爲遇到了一個小坑,由於不能把整個項目搬上來,因此這裏用一個小事例去簡單的描述一下。html
功能介紹ide
swiper滑塊視圖容器(輪播效果)oop
可配置項flex
這裏只簡單列出示例中所需的一些屬性,如需瞭解更多 【請點擊,瞭解更多詳情】動畫
indicatorDots: true, // 是否顯示面板指示點 autoplay: false, // 是否自動切換 circular: true, // 是否採用銜接滑動 current: 0, // 當前所在頁面的 index interval: 500, // 自動切換時間間隔 duration: 500 // 滑動動畫時長
示例this
場景spa
類答題效果,答對本題自動跳轉下一題,並保持滑塊的銜接效果(這裏咱們用按鈕來代替自動跳轉)3d
WXML:code
<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'>跳轉下一題</button> </view> </view> </page>
WXSS:component
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, // 當前所在頁面的 index interval: 500, // 自動切換時間間隔 duration: 500 // 滑動動畫時長 }, testDetails (e) { // bindchange事件 console.log(e) }, nextPage () { // 跳轉下一題 let current = this.data.current current++ if (current > 2) { current = 0 } } })
運行效果: