uniapp+vue+微信小程序实现侧边导航

效果:开始时图片一半隐藏, 手指划入侧边图片缓慢移出,划出缓慢移入隐藏

事件:

|--------------|----------|
| @touchstart | 手指触摸开始 |
| @touchmove | 手指触摸后移动 |
| @touchend | 手指离开 |
| @touchcancel | 被打断(来电等) |
| @tab | 立即离开 |

页面结构:

html 复制代码
<view class="maxBox">
        <view
            class="sideBox"
            :class="{ show: isTouching }"
            @touchstart="onTouchStart"
            @touchmove="onTouchMove"
            @touchend="onTouchEnd"
        >
            <view class="sideButton">
                <!-- 按钮的内容,可以是图片或文字 -->

            </view>
        </view>

</view>

逻辑:

javascript 复制代码
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);//这里设置手指离开多久后重置
}

样式:

css 复制代码
.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; /* 全展示 */
}
相关推荐
活宝小娜3 分钟前
vue不刷新浏览器更新页面的方法
前端·javascript·vue.js
程序视点6 分钟前
【Vue3新工具】Pinia.js:提升开发效率,更轻量、更高效的状态管理方案!
前端·javascript·vue.js·typescript·vue·ecmascript
coldriversnow7 分钟前
在Vue中,vue document.onkeydown 无效
前端·javascript·vue.js
我开心就好o8 分钟前
uniapp点左上角返回键, 重复来回跳转的问题 解决方案
前端·javascript·uni-app
Random_index10 分钟前
#Uniapp篇:支持纯血鸿蒙&发布&适配&UIUI
uni-app·harmonyos
刚刚好ā1 小时前
js作用域超全介绍--全局作用域、局部作用、块级作用域
前端·javascript·vue.js·vue
qq_17448285752 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502772 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
会发光的猪。3 小时前
css使用弹性盒,让每个子元素平均等分父元素的4/1大小
前端·javascript·vue.js
天下代码客4 小时前
【vue】vue中.sync修饰符如何使用--详细代码对比
前端·javascript·vue.js