目錄

• 背景
  
• 目標效果
  
• 思路
  
• 實現
  
• swiper監聽change
• 自定義dot模組
• change事件中的邏輯
• 寫在最後
  

本文主要介紹如何基於已有的元件（比如微信小程式的swiper，還有我們平時h5用的比較多的swiper.等），實現一個滑塊樣式的指示面板。demo基於小程式，但是邏輯通用。

背景

最近要做一個新的小程式，在首頁部分有一個swiper模組，因為設計同學的出色發揮😭，讓我在枯燥的開發中得到了些許快樂。他們將swiper中指示面板中的點，改成了一個滑塊，說實話，老老實實整成一排點它不香麼，哈哈哈哈。但是我http://www.cppcns.com寵他~

目標效果

整體來看很簡單。主要是下邊的滑塊需要花一些功夫。整理需求之後需要實現的功能點如下：

• 滑塊需要有一個自然的滑動效果。
• 滑塊需要跟著滑動方向滑動。

思路

經過整理，實現方案如下：

• 在滑動swiper的content的時候，我們可以獲取當前頁面的curPage（一般情況下元件都會提供當前頁），接著我們可以在滑動結束之後設定上一個頁面的prePage，這個prePage其實就是本次的curPage。通過這個page我們可以得到滑塊滑動的起始位置以及結束位置。
• 滑動我們可以通過transform來實現。
• 因為用了transform，所以我們需要小程式支援自定義style，但目前來看小程式提供了一套this.animate的方法。

實現

swiper監聽change

首先我們需要使用swiper的change事件，程式碼如下：

<swiper
 class="hot-contentwww.cppcns.com-swiper"
 indicator-dots="{{indicatorDots}}"
 vertical="{{vertical}}"
 bindchange="sliderHandler">
 <block wx:for="{{popular_zone_list}}" wx:key="*this">
   <swiper-item>
     <view class="hot-list">
       這個是swiper{{index}}
     </view>
   </swiper-item>
 </block>
</swiper>

自定義dot模組

其次，我們需要自定dot的DOM，也就是我們的滑塊區域，程式碼如下：

<view class="dot">
 <view class="dot-bar" style="width: {{dotBarWidth}}rpx"></view>
</view>

這其中需要給我們的滑塊一個初始化的大小，不然滑動之後會有一個寬度變換的抖動，也就是dotBarWidth。

這個滑塊的大小是基於滑道的長度，以及swiper-item的數量來計算的。這樣子得到寬度之後我們只要偏移滑塊寬度的倍數即可。

let dotWidth = 100;
let dotBarWidth = Math.round(dotWidth/popular_zone_list.length);

change事件中的邏輯

模板已經寫完了，那我們就開始寫change的事件，程式碼如下：

sliderHandler({detail}) {
 let curPage = detail.current;
 let self = thhttp://www.cppcns.comis;
 this.animate('.dot-bar',[
   {
     translateX: self.prePage * 100 + '%',transfowww.cppcns.comrmOrigin: 'center',},{
     translateX: curPage*100 + '%',transformOrigin: 'center',],100,function () { //animate的回撥
   self.prePage = curPage;
   self.clearAnimation('.container',{
     translateX: true,transformOrigin: true
   });
 });
},// 如果不是小程式，那麼this.animate這個換成動態繫結style，或者其他的DOM操作即可。

到此功能已經實現了，是不是發現這個功能還是很簡單的挺不錯的😒。

寫在最後

說實話，在實現的過程中，我有一些比較智障的行為，和當時的狀態有關吧，不知怎麼就過於關注在如何判斷滑塊是左滑還是右滑，導致繞了個路。但是其實基於結果去考慮發現，我們只要計算起始和結束位置即可，左滑必定是開始位置大於結束位置的。希望以上方案能給大家一些參考吧~🎉

到此這篇關於微信小程式swiper-dot中的點如何改成滑塊的文章就介紹到這了,更多相關微信小程式swiper-dot點改滑塊內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！