Vueモバイル端末が指のスライド効果を実現

Vueモバイル端末が指のスライド効果を実現

この記事の例では、Vueモバイル端末で指のスライド効果を実現するための具体的なコードを紹介します。具体的な内容は次のとおりです。

スライドすると、それに応じて黄色のブロックの幅が変わります。タッチクリックで実現しています。現時点では、幅の変更に問題があると感じています。まだ検討中です。

コードは次のとおりです:

<テンプレート lang="html">
  <div class="back" ref="back" @touchstart.prevent="touchStart" @touchmove.prevent="touchMove">
    <div class="back-r" 
 @touchstart.prevent="タッチ開始" @touchmove.prevent="タッチ移動"
 @touchend="タッチ終了"
 ref="右"></div>
  </div>
</テンプレート>
 
<スクリプト>
エクスポートデフォルト{
  データ() {
  },
  作成された() {
    this.touch = {}
  },
  メソッド: {
    タッチスタート(e) {
      定数touch = e.touches[0]
   
  //クリック時の位置 this.touch.startX = touch.pageX
      this.touch.startY = touch.pageY
   console.log('----',this.$refs.right.clientWidth)
    },
//クリックを開始するtouchMove(e) {
      console.log("移動");
      定数touch = e.touches[0]
   //スライド位置と初期位置の差 const deltaX = touch.pageX - this.touch.startX
   コンソールログ(デルタX)
      定数 deltaY = touch.pageY - this.touch.startY;
      //右幅を印刷 console.log('----',this.$refs.right.clientWidth+'px') 
   const rwidth = this.$refs.right.clientWidth
   //右の幅を変更します this.$refs.right.style.width = (this.$refs.right.clientWidth + Math.floor(deltaX/50)) +'px'
   //幅が0未満か400より大きいかを判断する
   rwidth<0の場合{
    this.$refs.right.style.width = 0
   } そうでない場合(rwidth>400){
    this.$refs.right.style.width = 400+'px'
   } 
   console.log('----',this.$refs.right.clientWidth+'px')

    },
    タッチ終了() {
      console.log("終了");
      // console.log(this.percent);
    }
  }
}
</スクリプト>
 
<style scoped lang="stylus" rel="stylesheet/stylus">
体{
  マージン:0;
  パディング: 0;
  オーバーフロー: 非表示;
  タッチアクション:なし;
}
。戻る{
 幅: 100%
 高さ: 100ピクセル
 境界線 10px 実線 #0000FF
 オーバーフロー: 非表示;
}
  
  
  .back-r{
   // 表示: インラインブロック
   // 垂直位置合わせ: 上
   位置: 相対
   幅: 400ピクセル
   高さ: 100%
   オーバーフロー: 非表示;
   背景色: 黄色
  }
    
</スタイル>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • vue2.0 モバイル スライド イベント vue-touch のサンプル コード
  • Vueでモバイル端末上で左右スライド効果を実現する方法
  • Vue カスタム モバイル タッチ イベント: クリック、スライド、長押しイベント
  • vue vue-touch モバイルジェスチャの詳細な説明

<<:  docker-composeの詳細なインストールと使用方法

>>:  MySQL の完全なデータベース バックアップからデータベースとテーブルを復元する方法

推薦する

Deepin Linuxでカーネルを手動でアップグレードする方法

deepinとUbuntuどちらもdebianをベースにしたディストリビューションであり、ここではU...

Linux コマンドラインのクイックヒント: ファイルの検索方法

私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...

MySQL が暗黙のデフォルト値を処理する方法

何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...

DockerはMariaDBのサブライブラリとサブテーブル、および読み書き分離機能を実装します

目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...

MySQL データベース インデックスの面接の質問 (基本的なプログラマー スキル)

目次導入インデックスの原則1. データページ2. ページディレクトリ3. インデックス原則分析要約す...

データベース接続プール Druid の使用手順

総合的なパフォーマンス、信頼性、安定性、スケーラビリティ、使いやすさなどの要素に基づいて、最適なデー...

Linux システムコマンドのメモ

この記事では、Linux システム コマンドについて説明します。ご参考までに、詳細は以下の通りです。...

Win10 は Tsinghua ソースを使用して pytorch-GPU バージョンをすばやくインストールします (推奨)

Cudaがインストールされているかどうかを確認してくださいアナコンダプロンプトに入力nvcc -V...

CentOS に MySQL 8.0 をインストールして設定するための詳細な手順

序文CentOS に MySQL をインストールして設定する手順は次のとおりです。文章yumソースか...

MySQL sql_mode の変更が有効にならない理由と解決策

目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...

黒、白、グレーの控えめでエレガントなウェブデザインを鑑賞

クラシックな色の組み合わせの中でも、黒、白、グレーの時代を超えた魅力を否定できる人はおそらくいないで...

CentOS 8 Zabbix 4.4 インストール ガイド

Zabbix サーバー環境プラットフォームZABBIX バージョン 4.4セントOS8 MySQL ...

WeChatアプレットは日付と時刻に基づいた並べ替え機能を実装

最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件が...

メタビューポートタグ(モバイルブラウジングズームコントロール)の使用方法

OP が現在のファームウェアで Web ページを開くと、常に 50% にズームアウトされてから表示さ...

MySQL の where と on の違いと、いつ使用するか

以前、テーブル結合クエリを書いていたとき、whereとonの違いがわからず、SQLに小さな問題が発生...