前述のこの記事はとても短いです〜 文章私は最近、ページをめくるスライドという効果を必要とする小さなアクティビティを行いました。おそらく次のようになります: <!-- HTML コード --> <div class="ページコンテナ"> <div class="page" style="background: #dc3b26">1</div> <div class="page" style="background: #f3b03d">2</div> <div class="page" style="background: #44a2f8">3</div> </div> CSS では、まず、ページをめくるにはスライドするので、「常に 1 つの画面だけが存在する」ことを保証する必要があります。これは、グローバル スタイル シートで制御できます。次に、「各ページ」が親要素全体を占める必要があります。ここで実際に使用する機能は、「div はブロック要素であり、外部からの力なしに垂直に配置される」というものです。 /** CSS スタイル */ html, 体{ マージン: 0; パディング: 0; 幅: 100%; 高さ:100vh; オーバーフロー: 非表示; フォントサイズ: 60px; } .ページコンテナ{ 幅: 100%; 高さ: 100%; } .ページコンテナ .ページ{ 幅: 100%; 高さ: 100%; } JS 実装も非常にシンプルです。モバイル端末上にあるため、ジェスチャ スライド機能を実装するために
// グローバル js を制御するファイルです // ブラウザのデフォルトの動作をグローバルに防止します document.addEventListener("touchstart",function(e){ if(e.cancelable){ e.preventDefault(); } },{受動態: false}) // {passive: false} は、前のコードに動作をリセットする必要があるかもしれないことを伝えます document.addEventListener("touchmove",function(e){ if(e.cancelable){ e.preventDefault(); } },{受動態: false}) // JavaScript コード let curPageIndex=0; pageContainer を document.querySelector(".page-container"); とします。 let pageNumber=pageContainer.children.length; //ページ数// ドキュメントウィンドウの高さ(ここでは1画面の高さ) cHeight=document.documentElement.clientHeight とします。 // ページコンテナの margin-top を適切な値に設定して、ビュー関数 toPage(){ に表示されるようにします。 pageContainer.style.transition="すべて .5 秒の遷移"; pageContainer.style.marginTop=-curPageIndex*cHeight+"px"; // 変更が完了したらトランジション効果を削除します。 pageContainer.addEventListener("transitionend",function(){ pageContainer.style.transition="なし"; },{once:true}) } ページへ() pageContainer.ontouchstart=関数(e){ let y=e.changedTouches[0].clientY; // 指が押された垂直座標 pageContainer.ontouchmove=function(e){ let dis=e.changedTouches[0].clientY-y; // 距離を計算する // ページコンテナの上部の余白を計算する mtop=-curPageIndex*cHeight+dis とします。 (mtop>0)の場合{ 0 の場合 }そうでない場合、mtop<-(ページ番号-1)*cHeight){ mtop=-(ページ番号-1)*c高さ; } // リアルタイムで位置を変更します pageContainer.style.marginTop=mtop+"px"; } pageContainer.ontouchend=関数(e){ dis = e.changedTouches[0].clientY-yとします。 // スライド距離が短すぎる場合は、スライド前の位置に戻ります if(Math.abs(dis)<=60){ ページへ() }それ以外の場合(dis>0 && curPageIndex>0){ curPageIndex--; ページへ() }それ以外の場合(dis<0 && curPageIndex<pageNumber-1){ curPageIndex++; ページへ() } // 指が離れたら、監視イベントをキャンセルします。pageContainer.ontouchmove=null; pageContainer.ontouchend = null; } } これまでのところ、機能は完璧のようです。しかし今回は、最初のページにボタンを追加します。 <div class="page" style="background: #dc3b26"> <button onclick="alert('哈哈哈哈')" class="but">クリックしてください!</button> 1 </div> 次に、ページに移動して効果を確認します。 無効! これは、上記のグローバル js ファイルに「ブラウザのデフォルト イベントを防止する」コードを追加したためです。 しかし、上記のように、すべてを禁止すると必ず何らかの問題が発生します。どうすればよいでしょうか? <button data-default="true" onclick="alert('哈哈哈哈')" class="but">クリックしてください!</button> 上記の「グローバル js を制御するファイル」の内容を次のように変更します。 // ブラウザのデフォルトの動作を全体的に防止する document.addEventListener("touchstart",function(e){ if(e.target.dataset.default){ 戻る; } if(e.cancelable){ e.preventDefault(); } },{受動態: false}) document.addEventListener("touchmove",function(e){ if(e.target.dataset.default){ 戻る; } if(e.cancelable){ e.preventDefault(); } },{受動態: false}) 大丈夫です: 実際には、別の「解決策」があります。前述のように、モバイル クリックは実際にはマウス イベントによってシミュレートされるため、mousestart イベントから開始できます。また、ボタン要素は「最初のページ」の (子) 要素であるため、イベントがバブリングしないようにする方法を使用できます。 <!-- ボタンは通常のボタンです --> <button class="but">クリックしてください!</button> document.querySelector(".but").addEventListener("touchstart",function(e){ e.stopPropagation(); alert('嘎哈哈'); }、間違い)
モバイル端末でのスライドページめくり効果の実装とクリックイベントの問題に関するこの記事はこれで終わりです。スライドページめくり効果に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 以下もご興味があるかもしれません:
|
<<: Linux プラットフォームの MySQL でリモート ログインを有効にする
>>: Linuxシステムにおける重要なサブディレクトリの問題について話す
さっそく、レンダリングを見てみましょうソースコードは以下のとおりです <!DOCTYPE ht...
リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...
VueはRefを使用してレベル間でコンポーネントインスタンスを取得します例の紹介開発プロセスでは、レ...
目次オブザーバーパターンとは何ですか?シナリオシミュレーションコードの実装コードのリファクタリング要...
丁寧に掃除を始めましょう!未使用ボリュームの一覧docker ボリューム ls -qf dangli...
この記事では、画像のシームレスなスクロールを実現するためのJavaScriptの具体的なコードを参考...
Linux サーバー A と B が 2 台あり、一方のサーバーから SSH 経由でパスワードなしで...
目次変数のスコープ閉鎖の概念クロージャの使用クロージャのデメリット最後に、クロージャのメリットとデメ...
目次Vuex は単一の状態ツリーを使用するため、すべてのアプリケーション状態が比較的大きなオブジェク...
1. MySQL 8.0.20をダウンロードして解凍するダウンロードリンク: https://dev...
目次js ディープコピーデータ保存方法浅いコピー/深いコピーとは何か一般的なディープコピーの実装1....
この記事の例では、ミニプログラムでリストカウントダウンを実装するための具体的なコードを参考までに共有...
まずは本体から始めましょう:ウェブページを閲覧するとき、最初に目に留まるのは通常、ページの背景です。...
目次1. エラー現象2. エラー分析3. エラー解決1. エラー現象仮想マシンでLVGLエミュレータ...
この記事では、MySQL 8.0.24のインストールチュートリアルを参考までに紹介します。具体的な内...