JSをベースにモバイル端末の左スライド時の削除ボタン機能を実現

最近モバイル プロジェクトに取り組んでいたとき、リスト ページの各項目を左にスライドすると表示される対応する削除ボタンを実装する必要がありました。もともと zepto の touch.js プラグインを直接使用したかったのです。以前に同じ機能を実装するためにこのプラグインを使用していましたが、当時は swipeLeft メソッドと swipeRight メソッドを使用するだけで非常に使いやすかったのですが、今日この機能を再度使用し始めたときに、これら 2 つのメソッドに問題があることがわかりました。使用しても効果はなく、まったく反応がありませんでした。オンラインで情報を確認し、zepto と touch.js の最新バージョンをダウンロードしましたが、うまくいきませんでした。したがって、このプラグインは放棄されました。

以下は私が後で実装したコードです。実際には、ネイティブjsのタッチイベントを使用し、タッチポイントの座標を組み合わせて左右のスワイプを決定します。また、モバイル アダプテーション用のネイティブ JS の実装がページの先頭に追加されていることに気付きました。これは主に、さまざまなサイズの画面上でのモバイル ページの表示を容易にし、非常に小さなエラーでデザイン ドラフトをより適切に準備するためです。さまざまなサイズの画面で表示されますが、使用される本体はレムです。

        
  
 
 
 
侧滑显示删除按钮1删除
 
侧滑显示删除按钮2删除
 
侧滑显示删除按钮3删除
 
 
   

原理は実際には非常に単純です。つまり、さまざまな画面に従ってルートノードHTMLのfont-sizeを計算し、それを使用します。 rem はルート ノードを比較します。 htmlfont-sizeは、さまざまな要素のサイズ、間隔などを計算するために使用されます。

font-size，再利用rem相对于根节点html的font-size来计算的原理来实现不同元素的大小、间距等。

也有人说其实不用这样的js来判断，直接用css3的响应式@media screen也可以，其实我认为在各种尺寸的安卓屏幕如此活跃的当下，@media screen

モバイル端末で左にスライドしたときの削除ボタン機能を実現するための JS に基づくその他の関連記事については、PHP 中国語 Web サイトに注目してください。