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 の完全なデータベース バックアップからデータベースとテーブルを復元する方法

推薦する

ウェブページの読み込み速度を上げる25の方法とヒント

はじめに<br />誰もが高速インターネット接続にアクセスできるわけではありません。たと...

Ubuntu 16.04 に Docker と nvidia-docker をインストールするための詳細なチュートリアル

目次DockerのインストールNvidia-docker のインストールDockerのインストール1...

Google 翻訳ツール: 多言語ウェブサイトを素早く実装

Google Chinaは、ウェブサイトやブログを素早く簡単に多言語化できる翻訳ツールをリリースした...

js+ca​​nvas でコードレイン効果を実現

この記事では、js+ca​​nvasコードの雨効果の具体的なコードを参考までに共有します。具体的な内...

Windows システムに VirtualBox と Ubuntu 16.04 をインストールするための詳細なチュートリアル

1. ソフトウェアの紹介バーチャルボックスVirtualBox は、無料のオープンソース仮想マシン ...

CentOS 8にJenkinsをインストールする方法

CentOS 8 に Jenkins をインストールするには、root アカウントまたは sudo ...

Docker で MySQL マスター スレーブ レプリケーションを実装するためのサンプル コード

目次1. 概要1. 原則2. 実装3. スレーブインスタンスを作成する4. マスタースレーブ構成要約...

WeChatミニプログラムの開発をスピードアップするためのヒント

1. app.jsonを使用してページを作成する私たちの通常の開発習慣によれば、新しいページを作成す...

Linux echo テキスト処理コマンドの使用法と例

Linux ヘルプ ドキュメントでの echo の説明は、Python や Java などのプログラ...

Centos7 での nginx のインストールと設定に関する詳細なチュートリアル

注: ソフトウェアのインストールの基本ディレクトリ パスは /usr/local です。ソフトウェア...

HTML での非同期ファイルアップロードの例

コードをコピーコードは次のとおりです。 <form action="/hehe&qu...

LinuxシステムでのSystemC環境設定方法

以下はcentos7での設定方法ですsystemc ソース パッケージをダウンロード: System...

JSはカリキュラムタイムテーブルアプレット(スーパーカリキュラムタイムテーブルを模倣)を実装し、カスタムバックグラウンド機能を追加します

概要:市販されているいくつかのタイムテーブルソフトウェアから教訓を得ました。機能が複雑すぎるため、タ...

ウェブデザインの概要

<br />1998年に最初の個人ページが誕生してから2008年の今日まで、デザイン業界...