摘要：廢話不多說先上成果圖實現(xiàn)思路主要分界面與邏輯兩大塊界面分為個部分左滑塊長度左內(nèi)容位置中間長度右滑塊長度右內(nèi)容位置邏輯個事件各滑塊長度及位置計算選中時變色具體實現(xiàn)步驟首先我們明白整個容器的長度是不變的等于左邊中間右邊所以我們可以通過先獲取總的

廢話不多說先上成果圖

實現(xiàn)思路

主要分界面與邏輯兩大塊

界面分為5個部分

左滑塊長度

左內(nèi)容位置

中間長度

右滑塊長度

右內(nèi)容位置

邏輯

touch3個事件

各滑塊長度及位置計算

選中時變色

具體實現(xiàn)步驟

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

this.rangeWidth?=?document.body.clientWidth

添加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"

使用類綁定的方式，在touchStart事件觸發(fā)的方式，修改點擊的滑塊的樣式，在松開時觸發(fā)touchend事件，恢復原來的樣式

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

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

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

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

leftTextTouchMove(e)?{
    let?touch?=?e.changedTouches[0];
????let?clientX?=?touch.clientX;//獲取滑動事件的橫坐標值????
    if?(clientX?>=?0)?{//只檢測滑塊在坐標值在屏幕內(nèi)???????
        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)?{//只檢測滑塊在坐標值在屏幕內(nèi)????????
        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.文本內(nèi)容通過計算值便可實現(xiàn)

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，歡迎大佬們猛戳，不定時更新