blog

javaScriptモバイルフィンガースライドイベント......

指定した要素に 3 段階の指スライド イベントをバインドし、transform の translate プロパティを使用して、スライドの方向または距離に応じて要素を移動します。 コードはコメントアウト...

Dec 24, 2020 · 2 min. read

イベントバインディングと受信距離パラメータ

  • 指のスライドイベントを指定された要素に3段階バインドし、トランスフォームのtranslateプロパティを使用して、スライドの方向または距離に応じて要素を移動します。
 <div
 onTouchStart={(e) => touchStart(e)}
 onTouchMove={(e) => touchMove(e)}
 onTouchEnd={(e) => touchEnd(e)} style={{ transform: `translateX(${distance}px)` }}>
 スライドさせる要素
 </div>
    // 指の接触位置を記録する const [startX, setStartX] = useState(-1) // 指の位置を記録する const [endX, setEndX] = useState(-1) // 指の移動距離を記録する const [distance, setDistance] = useState(0) // 指が画面に触れる const touchStart = (e: any) => { setStartX(e.touches[0].clientX) } //指のスライドを開始する const touchMove = (e: any) => { setEndX(e.touches[0].clientX) // スライドさせる要素の移動距離 let distance = (endX != -1) ? (-(startX - endX)) : 0; // 移動距離は40 Math.abs(distance) > 40 ? (setDistance(distance <= 0 ? -40 : 40)) : setDistance(distance) } // スクリーンから指を離す const touchEnd = (e: any) => { // 移動距離が40より大きく、クリックが除外される場合 if (endX != -1 && Math.abs(startX - endX) > 40) { endX > startX ? console.log('left') : console.log('right'); } // Finger offはパラメータのデフォルト値を復元する。 setStartX(-1) setEndX(-1) setDistance(0) }
    Read next

    html2canvasフラットピットドキュメント

    モバイルプロジェクトは、多くの場合、スクリーンショットを撮影するために、ページの全体または一部に直接ユーザーのブラウザを達成するためにスクリーンショットやスプライシング画像に遭遇します。このスクリプトは、DOM を読み取り、要素にさまざまなスタイルを適用することで、ページをキャンバス画像としてレンダリングします。サーバからのレンダリングは不要で、画像全体が ...

    Dec 24, 2020 · 2 min read

    プロミスのJS実装

    Dec 13, 2020 · 5 min read

    npm / yarn共通コマンド

    Dec 13, 2020 · 2 min read