效果:开始时图片一半隐藏, 手指划入侧边图片缓慢移出,划出缓慢移入隐藏
事件:
@touchstart | 手指触摸开始 |
@touchmove | 手指触摸后移动 |
@touchend | 手指离开 |
@touchcancel | 被打断(来电等) |
@tab | 立即离开 |
页面结构:
<view class="maxBox">
<view
class="sideBox"
:class="{ show: isTouching }"
@touchstart="onTouchStart"
@touchmove="onTouchMove"
@touchend="onTouchEnd"
>
<view class="sideButton">
<!-- 按钮的内容,可以是图片或文字 -->
</view>
</view>
</view>
逻辑:
const startX = ref(0) // 记录触摸起始位置
const isTouching = ref(false) // 控制按钮显示状态
// 触摸开始事件
const onTouchStart = (event) => {
// console.log("触摸开始事件", event)
startX.value = event.touches[0].pageX;
isTouching.value = true;
}
// 触摸移动事件
const onTouchMove = (event) => {
// console.log("触摸移动事件", event)
const moveX = event.touches[0].pageX;
if (startX.value - moveX > 20) {
isTouching.value = true;
}
}
// 触摸结束事件
const onTouchEnd = (event) => {
// console.log("触摸结束事件", event)
setTimeout(() => {
isTouching.value = false;
}, 1500);//这里设置手指离开多久后重置
}
样式:
.maxBox{
min-height: 100vh;
box-sizing: border-box;
position: relative;
}
.sideBox {
position: fixed;
right: -50rpx; /* 半隐藏 */
top: 50%;
transform: translateY(-50%);
width: 100rpx;
height: 100rpx;
transition: right 0.3s ease;
z-index: 999;
}
.sideBox.show {
right: 0; /* 全展示 */
}
本站资源均来自互联网,仅供研究学习,禁止违法使用和商用,产生法律纠纷本站概不负责!如果侵犯了您的权益请与我们联系!
转载请注明出处: 免费源码网-免费的源码资源网站 » uniapp+vue+微信小程序实现侧边导航
发表评论 取消回复