vueに基づいてカスタマイズされた単純な範囲コード-jsチュートリアル-php.cn

vueに基づいてカスタマイズされた単純な範囲コード

不言

リリース： 2018-09-11 15:27:25

オリジナル

1512 人が閲覧しました

この記事の内容は、vue に基づいて簡単な範囲を実装するコードに関するものです。必要な方は参考にしていただければ幸いです。さらにADOがあれば、結果の画像は次のとおりです。メインインターフェイスとロジックは2つの主要なブロックです。インターフェイスは5つの部分に分割されています

の長さの長さ左スライダー

vueに基づいてカスタマイズされた単純な範囲コード左コンテンツ位置

中間の長さ

右スライダーの長さ

右コンテンツ位置
ロジック
タッチ3イベント
長さの計算と各スライダーの位置
選択すると色が変わります

具体的な実装手順

まず第一に、コンテナ全体の長さは左 + 中央 + 右に等しい一定であることを理解しているので、最初に次のようにすることができます。コンテナの合計幅を取得して変数に保存します。ここでは画面の幅を使用します。

this.rangeWidth = document.body.clientWidth

ログイン後にコピー

vueのタッチイベントを3つ追加

@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イベントをトリガーし、クリックされたスライダーのスタイルを変更し、離されたときにtouchendイベントをトリガーし、元のスタイルに戻します

//滑动事件方法
leftTextTouchStart() {
    this.leftClick = true;
}, 
leftTextTouchEnd() {
    this.leftClick = false;
},
//类样式绑定
:class="{check_text_p:leftClick}"

ログイン後にコピー

スライド時の3つのコアブロックの幅と位置の計算、スライド中に座標軸がリアルタイムに変化するため、ここでは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

ログイン後にコピー

Sliding Inイベント、インターフェースの変化、左右のスライド距離が記録されます

leftTextTouchMove(e) {
    let touch = e.changedTouches[0];
    let clientX = touch.clientX;//获取滑动事件的横坐标值    
    if (clientX >= 0) {//只检测滑块在坐标值在屏幕内       
        if (this.left + 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';    
    }
}

ログイン後にコピー

コアコードは以上です。