小程序內置組件swiper,circular(銜接)使用小技巧

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
     }
  }
})

運行效果:

v2-6cf81a703ddff12c200b0855eef3c758_b.gif

相關文章
相關標籤/搜索