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

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

事件：

@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; /* 全展示 */
}

 

原文地址：https://blog.csdn.net/m0_66879773/article/details/142332258

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！