<del id="eas20"></del>

<strike id="eas20"></strike>

<fieldset id="eas20"></fieldset>

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

chaos_G 發(fā)布于2019-06-28 18:47 / 2292人閱讀

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

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：

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)行效果: