欧美三级国产三级日韩三级_亚洲熟妇丰满大屁股熟妇_欧美亚洲成人一区二区三区_国产精品久久久久久模特

小程序內(nèi)置組件swiper，circular（銜接）使用小技巧 - 新聞資訊 - 云南小程序開發(fā)|云南軟件開發(fā)|云南網(wǎng)站建設(shè)-昆明葵宇信息科技有限公司

159-8711-8523

云南網(wǎng)建設(shè)/小程序開發(fā)/軟件開發(fā)

知識(shí)

不管是網(wǎng)站，軟件還是小程序，都要直接或間接能為您產(chǎn)生價(jià)值，我們?cè)谧非笃湟曈X表現(xiàn)的同時(shí)，更側(cè)重于功能的便捷，營(yíng)銷的便利，運(yùn)營(yíng)的高效，讓網(wǎng)站成為營(yíng)銷工具，讓軟件能切實(shí)提升企業(yè)內(nèi)部管理水平和效率。優(yōu)秀的程序?yàn)楹笃谏?jí)提供便捷的支持！

您當(dāng)前位置>首頁(yè) » 新聞資訊 » 小程序相關(guān) >

小程序內(nèi)置組件swiper，circular（銜接）使用小技巧

發(fā)表時(shí)間：2021-3-31

發(fā)布人：葵宇科技

瀏覽次數(shù)：86

swiper，關(guān)于滑塊的一些效果無(wú)縫，斷點(diǎn)，視差等等...我想這里就不用做太多的贅述，這里給大家分享一下實(shí)戰(zhàn)項(xiàng)目中使用circular（銜接）的一點(diǎn)小特性、小技巧，當(dāng)然你也可以理解為遇到了一個(gè)小坑，因?yàn)椴荒馨颜麄€(gè)項(xiàng)目搬上來(lái)，所以這里用一個(gè)小事例去簡(jiǎn)單的描述一下。

功能介紹

swiper滑塊視圖容器（輪播效果）

可配置項(xiàng)

這里只簡(jiǎn)單列出示例中所需的一些屬性，如需了解更多 【請(qǐng)點(diǎn)擊，了解更多詳情】

indicatorDots: true, //  是否顯示面板指示點(diǎn)
    autoplay: false, // 是否自動(dòng)切換
    circular: true, // 是否采用銜接滑動(dòng)
    current: 0, // 當(dāng)前所在頁(yè)面的 index
    interval: 500, // 自動(dòng)切換時(shí)間間隔
    duration: 500 // 滑動(dòng)動(dòng)畫時(shí)長(zhǎng)

示例

場(chǎng)景

類答題效果，答對(duì)本題自動(dòng)跳轉(zhuǎn)下一題，并保持滑塊的銜接效果（這里我們用按鈕來(lái)代替自動(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)前所在頁(yè)面的 index
    interval: 500, // 自動(dòng)切換時(shí)間間隔
    duration: 500 // 滑動(dòng)動(dòng)畫時(shí)長(zhǎng)
  },
  testDetails (e) {
    // bindchange事件
    console.log(e)
  },
  nextPage () {
    // 跳轉(zhuǎn)下一題
     let current = this.data.current
     current++
     if (current > 2) {
      current = 0
     }
  }
})

運(yùn)行效果:


對(duì)比

通過(guò)上述，首先我們看到，當(dāng)我們左右滑動(dòng)時(shí)候，銜接效果是沒有毛病的，但是當(dāng)我們?nèi)ツM跳轉(zhuǎn)的時(shí)候，問(wèn)題出現(xiàn)了，銜接失效？這究竟是怎么回事呢？現(xiàn)在我們就來(lái)看一下在bindchange事件（testDetails）的兩次log中發(fā)生了什么？

問(wèn)題

如上圖所屬，source（來(lái)源） 出現(xiàn)問(wèn)題，模擬跳轉(zhuǎn)改變current方式改變了內(nèi)部銜接跳轉(zhuǎn)的機(jī)制，那既然知道原因，那下一步的就要考慮如何模擬swiper內(nèi)部的機(jī)制動(dòng)作，那又該如何模擬呢？就要從autoplay這個(gè)內(nèi)置屬性操刀了，廢話不說(shuō)直接上代碼！

JS（修改后）

小特性： 主動(dòng)觸發(fā)swiper的autoplay特性，檢測(cè)bindchange事件的source來(lái)源，做動(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)前所在頁(yè)面的 index
    interval: 500, // 自動(dòng)切換時(shí)間間隔
    duration: 500 // 滑動(dòng)動(dòng)畫時(shí)長(zhǎng)
  },
  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)行效果（修改后）

跑起來(lái)瞅一眼

總結(jié)

本篇文章更多的是對(duì)于一些用法的分享，簡(jiǎn)單的特性說(shuō)明，更深層次的內(nèi)容，有興趣的道友還是可以去研究下的，另外歡迎大家關(guān)注點(diǎn)贊，多謝?。ǔ掷m(xù)更新中...）

（注：封面來(lái)源于互聯(lián)網(wǎng)，如有侵權(quán)，請(qǐng)聯(lián)系作者刪除；如需轉(zhuǎn)載，請(qǐng)附原文鏈接及署名，多謝）

相關(guān)案例查看更多