デモ記録 | モバイル H5 ページで上下にスライドしてイベントをトリガーする小さな機能を実装する方法
簡単なデモを記録するだけですが、h5 ページを作成する方が現実的であれば、いくつかの興味深い機能を実現できます。
ここでは主に、Douyin ビデオの上下の切り替えを別の方法で実現するために使用します。ビデオに含まれる選択内容は、ほとんどのオンライン リスト切り替えに従って上下の切り替えに使用できないため、上と下の切り替えを使用します。スライドを臨界点まで下に下げると、切り替え再生イベントがトリガーされます。
効果を達成する
ページは実際にモバイル上でブラウザ経由で測定されます。
ページは次のとおりです。
スライドダウン時:
スライド距離が 100 を超える場合、スライドが停止したときに対応するアラート イベントがトリガーされ、transform 属性を通じてページの y 軸のリアルタイムの変位が実行されます。
スライドアップする場合も同じ原理です。
コード
コードは vue3 を使用して実装されており、コメントは非常に明確で、コードは原則に従って変換できます。
<script setup>
import {
onMounted, onUnmounted, ref } from 'vue';
// 在组件挂载时绑定触摸事件
onMounted(() => {
window.addEventListener('touchstart', handleTouchStart);
window.addEventListener('touchmove', handleTouchMove);
window.addEventListener('touchend', handleTouchEnd);
});
// 在组件卸载时解绑触摸事件
onUnmounted(() => {
window.removeEventListener('touchstart', handleTouchStart);
window.removeEventListener('touchmove', handleTouchMove);
window.removeEventListener('touchend', handleTouchEnd);
});
const startY = ref(0); // 记录触摸开始的Y坐标
const moveY = ref(0); // 记录滑动的Y距离
const isMoving = ref(false); // 是否正在滑动
// 监听touchstart事件，记录触摸开始的Y坐标
const handleTouchStart = (e) => {
startY.value = e.touches[0].clientY;
};
// 监听touchmove事件，计算滑动的Y距离
const handleTouchMove = (e) => {
if(!isMoving.value) {
isMoving.value = true;
}
moveY.value = e.touches[0].clientY - startY.value;
};
// 监听touchend事件，判断滑动的距离是否超过100px，并执行相应的事件
const handleTouchEnd = () => {
if(isMoving.value && moveY.value >= 100) {
alert('向下滑动超过100px了');
}
if(isMoving.value && moveY.value <= -100) {
alert('向上滑动超过100px了');
}
startY.value = 0;
moveY.value = 0;
isMoving.value = false;
};
</script>
<template>
<!-- 通过transform实现滑动时页面的跟随 -->
<div class="root" :style="{ transform: `translateY(${moveY}px)` }">
<h3>Demo Page</h3>
<p>滑动距离：{
{
moveY}}</p>
</div>
</template>
<style lang="less" scoped>
.root {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
position: relative;
background-color: rgb(0, 255, 234);
}
</style>