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

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;
            })
        }
    }
</スクリプト>

要約する

Vue で左右スライド効果を実現する方法についてはこれで終わりです。Vue の左右スライドに関する関連コンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません:
  • Vueは左上と右上のスライドナビゲーションを実装します
  • Vueはタブナビゲーションバーを実装し、左右のスライド機能をサポートしています
  • Vue+swiperは左右にスライドするテスト問題機能を実装します
  • Vueはスワイパーを使用して左右にスライドすることで画像を切り替える
  • Vueはbetter-scrollを使用してスライドと左右の連動を実現しています
  • Vueモバイル端末での左右スライドイベントの詳しい説明
  • Vueモバイル端末は携帯電話を左右にスライドして入力するアニメーションを実現
  • Vueでモバイル端末上で左右スライド効果を実現する方法
  • Vueをベースにページ切り替えの左右スライド効果を実装する
  • Vueの左右スライドボタングループコンポーネントの使い方の詳細な説明

<<:  Alibaba CloudにMySQLをインストールする方法の詳細な説明

>>:  grep を使用して MySQL エラー ログ情報を取得する方法の詳細な説明

推薦する

Docker Compose ネットワーク設定の説明

基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...

JavaScript の BigIn 関数の共通プロパティをまとめます

目次1. 概要2. 属性1. 数学演算子2. 比較演算子3. ブール演算結論1. 概要BigInt ...

MySQL マルチバージョン同時実行制御 MVCC の実装

トランザクション分離レベルの設定 グローバルトランザクション分離レベルを読み取りコミット済みに設定;...

JavaScript に関する 6 つの奇妙で便利な点

目次1. 解体のヒント2. デジタルセパレーター3. try...catch...finally が...

jsは双方向データバインディング(アクセサ監視)を実現します

この記事の例では、双方向データバインディングを実現するためのjsの具体的なコードを参考までに共有して...

NexusはHTTPSプロトコルをサポートするためにnginxプロキシを使用します

背景すべての会社の Web サイトは HTTPS プロトコルをサポートする必要があります。Aliba...

ウェブページの表の分割線を削除する方法

<br />Web テーブルの分割線を削除する方法。実際、上記の 3 つの表はいずれも ...

Vue3カプセル化メッセージメッセージプロンプトインスタンス関数の詳細な説明

目次Vue3 カプセル化メッセージプロンプトインスタンス関数スタイルレイアウトカプセル化メッセージ....

iframe でページを開く方法

解決:リンクのターゲット属性値をターゲット フレームワーク名と同じに設定するだけです。具体的な手順:...

Kubernetes コントローラーとラベルの簡単な分析

目次01 k8sの一般的なコントローラーRCコントローラーデプロイメント コントローラーステートフル...

Vue が Web オンラインチャット機能を実現

この記事では、Webオンラインチャットを実装するためのVueの具体的なコードを参考までに紹介します。...

MySQLインスタンスが起動できない問題の分析と解決

目次序文シナリオ分析要約する序文数日前、友人がWeChatで私に連絡してきて、マシンがダウンタイムか...

Web 開発チュートリアル クロスドメイン ソリューションの詳細な説明

序文この記事では、主にWeb開発のためのクロスドメインソリューションを紹介し、参考と学習のために共有...

MySql のスロークエリ分析とスロークエリログの開き方の詳細説明

最近はMySQLのパフォーマンス最適化についても研究しているので、今日の投稿は勉強ノートとしても使え...