この記事の例では、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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: docker-composeの詳細なインストールと使用方法
>>: MySQL の完全なデータベース バックアップからデータベースとテーブルを復元する方法
deepinとUbuntuどちらもdebianをベースにしたディストリビューションであり、ここではU...
私たちのコンピューターには、ディレクトリ、写真、ソース コードなどのファイルが保存されています。たく...
何人かの学生は、マスターとスレーブの間の不一致の問題に遭遇したと述べました。一般的な状況としては、m...
目次1. はじめに2. 環境整備1. 基本環境3.Mysqlマスタースレーブ構成をインストールする1...
目次導入インデックスの原則1. データページ2. ページディレクトリ3. インデックス原則分析要約す...
総合的なパフォーマンス、信頼性、安定性、スケーラビリティ、使いやすさなどの要素に基づいて、最適なデー...
この記事では、Linux システム コマンドについて説明します。ご参考までに、詳細は以下の通りです。...
Cudaがインストールされているかどうかを確認してくださいアナコンダプロンプトに入力nvcc -V...
序文CentOS に MySQL をインストールして設定する手順は次のとおりです。文章yumソースか...
目次序文シナリオシミュレーション要約する序文最近、sql_mode の話題については何度も話し合われ...
クラシックな色の組み合わせの中でも、黒、白、グレーの時代を超えた魅力を否定できる人はおそらくいないで...
Zabbix サーバー環境プラットフォームZABBIX バージョン 4.4セントOS8 MySQL ...
最近、小さなプログラム プロジェクトを引き継いだのですが、リストを日付と時刻で並べ替えるという要件が...
OP が現在のファームウェアで Web ページを開くと、常に 50% にズームアウトされてから表示さ...
以前、テーブル結合クエリを書いていたとき、whereとonの違いがわからず、SQLに小さな問題が発生...