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 エラー ログ情報を取得する方法の詳細な説明

推薦する

MySQLでヘッダー付きのCSVファイルをエクスポートする方法

公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...

MySQL の例 DTID マスタースレーブ原理の分析

目次1. GTIDの基本概念2. GTIDの利点3. GTIDの仕組み4. 従来のレプリケーションに...

CSSポジショニングによる階層関係の問題の詳細な説明

絶対、相対、固定位置の位置決めabsolue: 絶対配置。上、下、左、右を使用して、配置先の親要素に...

Vue Element フロントエンドアプリケーション開発 従来の Element インターフェースコンポーネント

目次1. リストインターフェースとその他のモジュールの表示処理2. 従来のインターフェースコンポーネ...

iOS WeChat H5ページのゴム反発効果の落とし穴記録

ビジネス要件最近開発したプロジェクトの一つに、WeChat公式アカウントに関連したH5ページがありま...

Vue要素ヘッダーにスラッシュを追加するための実装コード

<テンプレート> <div class="アプリコンテナ"&...

HTML+CSS+JavaScript でガールフレンド版のスクラッチ カードを作成します (一度見ればすぐに覚えられます)

誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...

MySQLからデータをインポートする際の不正なフォーマット、インポートの遅延、データ損失などの問題を迅速に解決します。

遅い問題を完全に解決したい場合は、MySQL を MySQL 8.0 にアップグレードすることをお勧...

JavaScript におけるイベント バブリング メカニズムの詳細な分析

バブリングとは何ですか? DOM イベント フローには、イベント キャプチャ ステージ、ターゲット ...

Nginx操作応答ヘッダー情報の実装

前提条件: ヘッダー情報操作をサポートするには、ngx_http_headers_module モジ...

WeChatアプレットにナンバープレート入力機能を実装

目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...

MySQL サブクエリとグループ化されたクエリ

目次概要サブクエリサブクエリの分類クエリの結果によるとサブクエリの位置で区別する選択後のサブクエリサ...

MySQL 5.7.17 とワークベンチのインストールと設定のグラフィックチュートリアル

この記事では、MySQL 5.7.17ワークベンチのインストールと設定方法を参考までに紹介します。具...

CSS 3.0とビデオを組み合わせることでクリエイティブなオープニング効果を実現

CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...