如何把微信小程序的swiper-dot中的點改爲滑塊

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

背景

最近要作一個新的小程序，在首頁部分有一個swiper模塊，由於設計同窗的出色發揮😭，讓我在枯燥的開發中獲得了些許快樂。他們將swiper中指示面板中的點，改爲了一個滑塊，說實話，老老實實整成一排點它不香麼，哈哈哈哈。可是我寵他~

目標效果

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

• 滑塊須要有一個天然的滑動效果。
• 滑塊須要跟着滑動方向滑動。

思路

通過整理，實現方案以下：

• 在滑動swiper的content的時候，咱們能夠獲取當前頁面的curPage（通常狀況下組件都會提供當前頁），接着咱們能夠在滑動結束以後設置上一個頁面的prePage，這個prePage其實就是本次的curPage。經過這個page咱們能夠獲得滑塊滑動的起始位置以及結束位置。
• 滑動咱們能夠經過transform來實現。
• 由於用了transform，因此咱們須要小程序支持自定義style，但目前來看小程序提供了一套this.animate的方法。

實現

swiper監聽change

首先咱們須要使用swiper的change事件，代碼以下：

<swiper class="hot-content-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 = this;
 this.animate('.dot-bar', [
   {
     translateX: self.prePage * 100 + '%',
     transformOrigin: 'center',
   },
   {
     translateX: curPage*100 + '%',
     transformOrigin: 'center',
   },
 ], 100, function () { //animate的回調
   self.prePage = curPage;
   self.clearAnimation('.container', {
     translateX: true,
     transformOrigin: true
   });
 });
},
// 若是不是小程序，那麼this.animate這個換成動態綁定style，或者其餘的DOM操做便可。
複製代碼

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

寫在最後

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