序文個人の実際の開発で使用した効果問題を、今後の開発やレビューに役立てるためにまとめています。他の人にも当てはまる場合は、批判せずに自由に取り入れてください。 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 をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Alibaba CloudにMySQLをインストールする方法の詳細な説明
>>: grep を使用して MySQL エラー ログ情報を取得する方法の詳細な説明
公式ドキュメント http://dev.mysql.com/doc/refman/5.7/en/se...
目次1. GTIDの基本概念2. GTIDの利点3. GTIDの仕組み4. 従来のレプリケーションに...
絶対、相対、固定位置の位置決めabsolue: 絶対配置。上、下、左、右を使用して、配置先の親要素に...
目次1. リストインターフェースとその他のモジュールの表示処理2. 従来のインターフェースコンポーネ...
ビジネス要件最近開発したプロジェクトの一つに、WeChat公式アカウントに関連したH5ページがありま...
<テンプレート> <div class="アプリコンテナ"&...
効果画像:実装コード: <テンプレート> <div id="map&qu...
誰もがスクラッチ チケットで遊んだことがあると思います。子供の頃、ポケットにお金が入るとすぐに友達に...
遅い問題を完全に解決したい場合は、MySQL を MySQL 8.0 にアップグレードすることをお勧...
バブリングとは何ですか? DOM イベント フローには、イベント キャプチャ ステージ、ターゲット ...
前提条件: ヘッダー情報操作をサポートするには、ngx_http_headers_module モジ...
目次序文背景大きな推測パターンを見つける構造とスタイルコンポーネントの実装パラメータキーボードの種類...
目次概要サブクエリサブクエリの分類クエリの結果によるとサブクエリの位置で区別する選択後のサブクエリサ...
この記事では、MySQL 5.7.17ワークベンチのインストールと設定方法を参考までに紹介します。具...
CSS 3.0 とビデオを組み合わせて実現したクリエイティブなオープニングをご紹介します。効果は次の...