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

廢話(huà)不多說(shuō)先上成果圖

實(shí)現(xiàn)思路

主要分界面與邏輯兩大塊

界面分為5個(gè)部分

左滑塊長(zhǎng)度

左內(nèi)容位置

中間長(zhǎng)度

右滑塊長(zhǎng)度

右內(nèi)容位置

邏輯

touch3個(gè)事件

各滑塊長(zhǎng)度及位置計(jì)算

選中時(shí)變色

具體實(shí)現(xiàn)步驟

首先我們明白整個(gè)容器的長(zhǎng)度是不變的等于左邊+中間+右邊所以我們可以通過(guò)先獲取總的容器的寬度并用變量進(jìn)行保存,這里我用的就是屏幕的寬度。

this.rangeWidth?=?document.body.clientWidth

添加vue的三種touch事件

@touchstart.stop.prevent="leftTextTouchStart"?//按下?
@touchmove.stop.prevent="leftTextTouchMove"?//滑動(dòng)?
@touchend.stop.prevent="leftTextTouchEnd"??//松開(kāi)//右滑塊，同上?
@touchstart.stop.prevent="rightTextTouchStart"?
@touchmove.stop.prevent="rightTextTouchMove"?
@touchend.stop.prevent="rightTextTouchEnd"

使用類(lèi)綁定的方式，在touchStart事件觸發(fā)的方式，修改點(diǎn)擊的滑塊的樣式，在松開(kāi)時(shí)觸發(fā)touchend事件，恢復(fù)原來(lái)的樣式

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

滑動(dòng)時(shí)三大塊核心寬度及位置的計(jì)算，因?yàn)榛瑒?dòng)中坐標(biāo)軸是實(shí)時(shí)變化，這里我們使用vue的計(jì)算屬性進(jìn)行操作

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

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

leftTextTouchMove(e)?{
    let?touch?=?e.changedTouches[0];
????let?clientX?=?touch.clientX;//獲取滑動(dòng)事件的橫坐標(biāo)值????
    if?(clientX?>=?0)?{//只檢測(cè)滑塊在坐標(biāo)值在屏幕內(nèi)???????
        if?(this.left?+?this.right?<=?this.rangeWidth)?{//防止左右滑塊位置倒置????????????
            this.leftWidth?=?clientX;//左滑塊距離等于x坐標(biāo)????????????//界面操作????????????
            $("#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;//獲取滑動(dòng)事件的橫坐標(biāo)值????
    if?(clientX?<=?this.rangeWidth)?{//只檢測(cè)滑塊在坐標(biāo)值在屏幕內(nèi)????????
        this.rightWidth?=?this.rangeWidth?-?clientX;//右邊滑塊距離等于總長(zhǎng)度減去滑動(dòng)橫坐標(biāo)???????
        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)容通過(guò)計(jì)算值便可實(shí)現(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，歡迎大佬們猛戳，不定時(shí)更新