Vue は左右のスライド効果のサンプルコードを実装します

序文

個人の実際の開発で使用した効果問題を、今後の開発やレビューに役立てるためにまとめています。他の人にも当てはまる場合は、批判せずに自由に取り入れてください。

Vue.js は、人気の JS フレームワークの 1 つです。Vue は、ユーザーインターフェイスを構築するためのプログレッシブ JavaScript フレームワークです。他の大規模なフレームワークとは異なり、Vue は下から上にレイヤーごとに適用されるように設計されています。 Vue のコアライブラリはビューレイヤーのみに焦点を当てているため、使いやすいだけでなく、サードパーティのライブラリや既存のプロジェクトとの統合も簡単です。一方、Vue を最新のツールチェーンやさまざまなサポートライブラリと組み合わせて使用すると、Vue は複雑なシングルページアプリケーション用のドライバーも完全に提供できます。

Vue.js は、インタラクティブな Web インターフェースを構築するためのライブラリです。シンプルで柔軟な API を備えた MVVM データバインディングと構成可能なコンポーネントシステムを提供します。技術的に言えば、vue.js は MVVM パターン上のビューモデル層 (viewModel) に重点を置いており、双方向データバインディングを通じてビュー (view) とモデル (model) を接続します。実際の DOM 操作と出力フォーマットは、ディレクティブとフィルターに抽象化されます。他の MVVM フレームワークと比較すると、vue.js は簡単に始めることができます。シンプルで柔軟な API を通じて、データ駆動型の UI コンポーネントを作成できます。

サンプルコード

HTMLコード

<テンプレート>
    <div id="スライドバー" class="box">
        <div class="item" ref="スライド" :style="slideStyle" @touchstart="開始($event)" @touchmove="移動($event)" @touchend="終了($event)">
          <img src="http://img2.imgtn.bdimg.com/it/u=2555191195,2735808065&fm=26&gp=0.jpg" alt="">
          <div class="right">
            <div class="title">こんにちは！</div>
            <p class="text">ハハハハ</p>
            <p class="price">良い</p>
          </div>
        </div>
        <div class="btn" ref="btn">
            <button>編集</button>
            <button style="background:#387ef5;color:#fff">収集</button>
        </div>
    </div>
</テンプレート>

CSSコード

<スタイル>
。箱{
    位置:相対;
    ボーダーボトム:0.026667rem 実線 #666666;
}
.btn{
  高さ:100%;
  位置:絶対;
  右:0;
  トップ:0;
  背景:赤;
  ディスプレイ:フレックス;
}
ボタン{
  幅：1.6rem;
  高さ:100%;
  背景:#f8f8f8;
  境界線:なし;
}
。アイテム{
  パディング:0.266667rem;
  ディスプレイ:フレックス;
  位置:相対;
  背景:#fff;
  zインデックス: 2;
  ボックスシャドウ: 0.026667rem 0 0.053333rem #ddd;
}
.item画像{
  幅:2.133333rem;
  高さ:2.133333rem;
  右マージン:0.4rem;
  境界線の半径: 0.133333rem;
}

.item .title{
  フォントサイズ:0.48rem;
  フロート: 左;
}
.item .text{
  フォントサイズ:0.426667rem;
  色:#888;
  フロート: 左;
  マージン: 0 1.33rem;
}
.アイテム .価格{
  色:#888;
  フロート: 左;
  マージン: 0 1.33rem;
}
</スタイル>

JSコード

<スクリプト>
    エクスポートデフォルト{
        名前: 'スライドバー',
        小道具: {

        },
        データ （）{
            戻る {
                フラグ: false、
                開始X: 0,
                終了X: 0,
                スライドスタイル: {
                    左: 0,
                    遷移: 'なし'
                }
            }
        },
        メソッド: {
            start (e){ //スライド開始時の画面のX軸の位置を記録します。this.flag = true;
                this.startX = e.touches[0].clientX;
                this.endX = this.$refs.slide.offsetLeft;
                this.slideStyle.transition = 'なし';
            },
            移動する（e）{
                if(this.flag){
                    // マウスの動きを処理するロジック var moveX = this.endX + (e.touches[0].clientX - this.startX); // スライド距離を計算します if (Math.abs(moveX) >= this.$refs.btn.offsetWidth && moveX < 0) { // スライド距離がclass:btnの幅より大きいかどうかを判断します moveX = (Math.abs(moveX) - this.$refs.btn.offsetWidth) * 0.1; // 0.3抵抗係数 this.slideStyle.left = - this.$refs.btn.offsetWidth - moveX + 'px';
                    }else if(moveX >= 0){ //スライド距離は0以上ですか?
                        this.slideStyle.left = 0 + 'px'; //class:item を 0 にするには 0 以上
                    }それ以外{
                        this.slideStyle.left = moveX + 'px'; // 0 未満の場合、class:item はスライド距離と同じになります}
                }
            },
            終了 (e){
                if(this.flag){
                    this.flag = false;
                    // endX = slide.offsetLeft;
                    var moveX = e.changedTouches[0].clientX - this.startX; //スライド距離を計算します this.slideStyle.transition = 'left .3s';
                    var btnWidth = this.$refs.btn.offsetWidth; //class:btn widthif(moveX < 0){
                        if(Math.abs(moveX) >= btnWidth / 2 || Math.abs(this.$refs.slide.offsetLeft) >= this.$refs.btn.offsetWidth){ //class:btn の幅の半分より大きい this.slideStyle.left = - btnWidth + 'px'; //class:btn の幅の半分以上左にスライドした場合は、後ろにスライドします}else if(Math.abs(moveX) < btnWidth / 2){ //class:btn の幅の半分より小さい this.slideStyle.left = 0 + 'px'; //class:btn の幅の半分を超えずに左にスライドした場合は、元の位置に戻ります}
                    }そうでない場合、moveX > 0 && this.endX != 0){
                        (Math.abs(moveX) >= btnWidth / 2)の場合{
                            this.slideStyle.left = 0 + 'px'; //class:btn の幅の半分以上右にスライドし、後ろにスライドします}else if(Math.abs(moveX) < btnWidth / 2){
                            this.slideStyle.left = - btnWidth + 'px'; //class:btn の幅の半分を超えずに右にスライドし、元の位置に戻ります}
                    }
                }
            }
        },
        マウントされた（）{
            var _this = これ;
            // js の最新のイベント リスナー transition を使用します。transition はこれで終了します。$refs.slide.addEventListener('transitionend',function(){
                _this.endX = this.offsetLeft;
            })
        }
    }
</スクリプト>