前言

官方自帶的以及vant weapp組件都是只有單向的slider

雙向的slider，網(wǎng)上抄了幾篇文章，代碼量巨大而且還有各種bug，相當(dāng)難用，chatGPT寫的也沒法用，沒辦法，只能自己手寫一個了

實現(xiàn)了的幾個細節(jié)（別的文章里大部分存在這些bug）

一、當(dāng)左滑塊拖動的范圍超過父容器最左邊時，賦值為0；
右邊同理賦值為最大值
二、當(dāng)右滑塊向左滑，并且試圖越過左滑塊時，右邊賦值與左邊相等，并且無法越過左邊（最多就是兩個圓圈緊挨著）
三、可重置

父組件代碼（很簡單）

<my-slider bind:submit="getAge" ></my-slider>

getAge(e){
    this.setData({
         min: e.detail.min,
         max: e.detail.max,
     })
 }

子組件代碼（最重要的部分）

<view class="slider-background">
  <view class="slider" style="padding-left: {{pdLeft}}rpx;padding-right: {{pdRight}}rpx;">
    <view class="slider-circle" bindtouchstart="touchStart1" bindtouchmove="touchMove1" bindtouchend="touchEnd1"></view>
    <view class="main-slider"></view>
    <view class="slider-circle" bindtouchstart="touchStart2" bindtouchmove="touchMove2" bindtouchend="touchEnd2"></view>
  </view>
</view>

.slider-background{
  width: 684rpx;
  margin: 0 auto;
  display: flex;
  align-items: center;
  height: 8rpx;
  background-color: rgb(228, 228, 228);
}
.slider{
  width: 100%;
  padding: 0;
  display: flex;
  align-items: center;
}
.slider .main-slider{
  width: calc(100% - 84rpx);
  height: 8rpx;
  background-color: blue;
}
.slider .slider-circle{
  width:  42rpx;
  height: 42rpx;
  background-color: #fff;
  border-radius: 50%;
  box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.5);

}

// components/slider/index.js
Component({
    // 使用全局樣式
    options: {
        addGlobalClass: true
    },
    lifetimes: {
        attached: function() {
          // 在組件實例進入頁面節(jié)點樹時執(zhí)行
            const res = wx.getSystemInfoSync()
            this.setData({
                ratio: 750 / res.windowWidth
            })
          
        },
        detached: function() {
          // 在組件實例被從頁面節(jié)點樹移除時執(zhí)行
        },
    },
    /**
     * 組件的屬性列表
     */
    properties: {

    },

    /**
     * 組件的初始數(shù)據(jù)
     */
    data: {
        pdLeft: 0,     // 左邊滑塊的位置
        pdRight: 0,     // 右邊滑塊的位置
        ratio: 2,
        startX1: 0,     //計算左滑塊初始位置離屏幕左邊的距離
        startX2: 0,     //計算右滑塊初始位置離屏幕右邊的距離
    },

    /**
     * 組件的方法列表
     */
    methods: {
        touchStart1(e){
            // console.log("e0", e.touches[0].clientX);
            if(!this.data.startX1){
                this.setData({
                    startX1: e.touches[0].clientX
                })

            }
        },
        touchMove1(e){
            // console.log("eeee1", e.touches[0].clientX);
            let x = (e.touches[0].clientX - this.data.startX1) * this.data.ratio
            let v = x >= 0 ? x : 0               //不能超過父容器最左邊
            if(v + this.data.pdRight >= 600){    //右邊的滑塊越過左邊時
                v = 600 - this.data.pdRight
            }
            this.setData({
                pdLeft: v
            })
            this.triggerEvent('submit', {
                min: Math.round(v/5),
            })
            // console.log("this.data.pdLeft", this.data.pdLeft);
        },
        touchEnd1(){},
        touchStart2(e){
            // console.log("e0", e.touches[0].clientX);
            if(!this.data.startX2){
                this.setData({
                    startX2: e.touches[0].clientX
                })

            }
        },
        touchMove2(e){
            // console.log("eeee2", e.touches[0].clientX);
            let x = (this.data.startX2 - e.touches[0].clientX) * this.data.ratio
            let v = x >= 0 ? x : 0              //不能超過父容器最右邊
            if(v + this.data.pdLeft >= 600){    //右邊的滑塊越過左邊時
                v = 600 - this.data.pdLeft
            }
            this.setData({
                pdRight: v
            })
            this.triggerEvent('submit', {
                max: Math.round((600-v)/5),
            })
            // console.log("this.data.pdRight", this.data.pdRight);
        },
        touchEnd2(){},
        reset(){
            this.setData({
                pdLeft: 0,
                pdRight: 0,
                startX1: 0,
                startX2: 0,
            })
            this.triggerEvent('submit', {
                min: 0,
                max: 120
            })
        },
        
    }
})

備注

看js文件可以看到，我是直接在里面寫了0到120，如果要設(shè)計成最小值最大值從父組件傳進來可以自己稍作修改。
其他參數(shù)同理（顏色，圓圈樣式等等）

存在的問題

父容器寫死了width: 684rpx;減去兩個圓圈剛好是600rpx；所以js里很多計算都是直接用600進行計算。

優(yōu)化方案：可以改成父容器里寫width: 100%;然后在js里先調(diào)用方法來獲取他的寬度文章來源地址http://www.zghlxwxcb.cn/news/detail-482306.html

到了這里，關(guān)于【微信原生小程序】手寫雙向slider滑塊的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！