前述のこの記事はとても短いです〜 文章私は最近、ページをめくるスライドという効果を必要とする小さなアクティビティを行いました。おそらく次のようになります: <!-- 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システムにおける重要なサブディレクトリの問題について話す
1. 解凍版のインストール(1)圧縮パッケージをダウンロードし、ディスクの場所に解凍します。圧縮パッ...
Alibaba Cloud ホストを購入したばかりで、その速度を試すのが待ちきれませんでした。しか...
Nginx 502 Bad Gateway エラーに何度か遭遇しました。ここでメモしておこうと思いま...
ウェブサイトの構築では、HTML と CSS に関するさまざまな問題に常に遭遇します。ウェブサイト ...
この記事では、mysql5.7.23 の詳細なインストールプロセスを記録し、皆さんと共有します。 1...
1. QTからJSへのデータフロー1. QTはJS関数を呼び出し、JSはパラメータを通じてQTの値を...
この記事では、大画面ページのスクリーンアダプテーションを実現するためのVueの具体的なコードを参考ま...
ミックスインは、コンポーネントに分散された再利用可能な機能を柔軟な方法で提供します。 Mixin オ...
擬似配列と配列JavaScript では、5 つのプリミティブ データ型を除き、関数を含め、その他す...
123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...
1. はじめにtr はテキストの一部を変換または削除するために使用されます。 tr は transl...
質問は https://www.zhihu.com/question/440231149 から参照さ...
背景説明: 既存の負荷分散装置には、付加価値状態にある指標があります (増加するだけで減少しないため...
1. マスタースレーブレプリケーションとは何ですか?マスター データベースの DDL および DML...
今日もとても実践的な事例です。名前を聞くだけで高度で難しそうですよね?今日はカルーセル画像の真髄を簡...