微信小程序监听页面滑动手势

功能背景是类似小红书顶部Tab,页面中左右滑动时,顶部Tab自动切换。

页面结构:

wxml 复制代码
<Tab  id="tabComponent" />
<scroll-view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd">

</scroll-view>

主要思路就是:记录滑动位置,滑动结束调用子组件方法,设置当前选中Tab以及后续数据请求操作。

selectComponent直接根据id找到子组件,然后直接调用子组件中提供的setActiveTab方法。

代码实现:

js 复制代码
    // 监听页面滑动手势开始
    touchStartX:0,//记录滑动开始位置
    touchEndX:0,//记录滑动结束位置
    touchStart(e){
        const x = e.touches[0].pageX;
        // console.log('滑动开始',x);
        this.touchStartX = x;
    },
    touchMove(e){
        const x = e.touches[0].pageX;
        // console.log('滑动中',x);
        this.touchEndX = x;
    },
    touchEnd(e){
        // console.log('滑动结束',e)
        const {touchStartX,touchEndX} = this;
        const tabComponent = this.selectComponent('#tabComponent');
        if(touchStartX < touchEndX - 50){
            // 向右滑动了
            tabComponent.setActiveTab(-1);
        }
        if(touchStartX > touchEndX + 50){
            // 向左滑动了
            tabComponent.setActiveTab(1);
        }
    },
    // 监听页面滑动手势结束
    
相关推荐
张迅之23 分钟前
【React】Ant Design 5.x 实现tabs圆角及反圆角效果
前端·react.js·ant-design
@CLoudbays_Martin1124 分钟前
为什么动态视频业务内容不可以被CDN静态缓存?
java·运维·服务器·javascript·网络·python·php
蔗理苦2 小时前
2025-09-05 CSS3——盒子模型
前端·css·css3
二川bro2 小时前
第25节:VR基础与WebXR API入门
前端·3d·vr·threejs
上单带刀不带妹2 小时前
Node.js 的模块化规范是什么?CommonJS 和 ES6 模块有什么区别?
前端·node.js·es6·模块化
缘如风3 小时前
easyui 获取自定义的属性
前端·javascript·easyui
诗书画唱3 小时前
【前端教程】JavaScript 实现图片鼠标悬停切换效果与==和=的区别
开发语言·前端·javascript
光影少年3 小时前
前端上传切片优化以及实现
前端·javascript·掘金·金石计划
喜葵3 小时前
前端安全防护深度实践:从XSS到供应链攻击的全面防御
前端·安全·xss
_r0bin_3 小时前
分片上传-
前端·javascript·状态模式