自制簡單的range（Vue）

廢話不多說先上成果圖

實現思路

主要分界面與邏輯兩大塊

界面分爲5個部分

• 左滑塊長度
• 左內容位置
• 中間長度
• 右滑塊長度
• 右內容位置

邏輯

• touch3個事件
• 各滑塊長度及位置計算
• 選中時變色

具體實現步驟

1. 首先我們明白整個容器的長度是不變的等於左邊+中間+右邊所以我們可以通過先獲取總的容器的寬度並用變量進行保存,這裏我用的就是屏幕的寬度。

this.rangeWidth = document.body.clientWidth

1. 添加vue的三種touch事件

@touchstart.stop.prevent="leftTextTouchStart" //按下 
@touchmove.stop.prevent="leftTextTouchMove" //滑動 
@touchend.stop.prevent="leftTextTouchEnd"  //鬆開//右滑塊，同上 
@touchstart.stop.prevent="rightTextTouchStart" 
@touchmove.stop.prevent="rightTextTouchMove" 
@touchend.stop.prevent="rightTextTouchEnd"

1. 使用類綁定的方式，在touchStart事件觸發的方式，修改點擊的滑塊的樣式，在鬆開時觸發touchend事件，恢復原來的樣式

//滑動事件方法
leftTextTouchStart() {
    this.leftClick = true;
}, 
leftTextTouchEnd() {
    this.leftClick = false;
},
//類樣式綁定
:class="{check_text_div:leftClick}"

1. 滑動時三大塊核心寬度及位置的計算，因爲滑動中座標軸是實時變化，這裏我們使用vue的計算屬性進行操作

rangeWidth //整個容器的寬度
leftWidth //左邊滑動的距離，通過滑動事件定義
rightWidth //右邊滑動的距離，通過滑動事件定義
width() {
    return Math.min(Math.max(0, this.rangeWidth - this.leftWidth - this.rightWidth), this.rangeWidth)//內容寬度應等於總寬度減去左右兩邊，且大於等於0小於等於總寬度
}
left() {    
    return Math.max(this.leftWidth, 0)//防止左滑出界面
}
right() {
    if (this.left + this.rightWidth <= this.rangeWidth) return Math.max(this.rightWidth - 0.5, 0)//防止右滑出界面
}

1. 滑動事件中，界面變化及左右兩邊滑動距離的記錄

leftTextTouchMove(e) {
    let touch = e.changedTouches[0];
    let clientX = touch.clientX;//獲取滑動事件的橫座標值    
    if (clientX >= 0) {//只檢測滑塊在座標值在屏幕內       
        if (this.left + this.right <= this.rangeWidth) {//防止左右滑塊位置倒置            
            this.leftWidth = clientX;//左滑塊距離等於x座標            //界面操作            
            $('#nowRange').css({'left': this.left, 'width': this.width});
            $('#leftText').css({'left': this.left});
            $('#leftImg').css({'left': this.left});      
        }   
    }
}
rightTextTouchMove(e) {
    let touch = e.changedTouches[0];
    let clientX = touch.clientX;//獲取滑動事件的橫座標值    
    if (clientX <= this.rangeWidth) {//只檢測滑塊在座標值在屏幕內        
        this.rightWidth = this.rangeWidth - clientX;//右邊滑塊距離等於總長度減去滑動橫座標       
        if (this.left + this.right <= this.rangeWidth) {//防止左右滑塊位置倒置            //界面變化           
            $('#nowRange').css({'width': this.width});
            $('#rightText').css({'right': this.right});
            $('#rightImg').css({'right': this.right});
        }    
    }
},

6.文本內容通過計算值便可實現

leftText() {
    let num = parseInt(this.left / this.rangeWidth * 100);
    if (num === 0 || isNaN(num)) return '不限';    
    return num + 'k';
}
rightText() {
    if (this.rangeWidth === 0) return '不限';    
    let num = parseInt((this.rangeWidth - this.right) / this.rangeWidth * 100);
    if (num >= 0) {
        if (num === 100) return '不限';
        return num + 'k';    
    }
}

核心代碼就這些了，撒花完結，優化什麼的，你們自己看着來咯

這是我的github，歡迎大佬們猛戳，不定時更新