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

功能背景是类似小红书顶部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);
        }
    },
    // 监听页面滑动手势结束
    
相关推荐
RickyWasYoung32 分钟前
【matlab】字符串数组 转 double
android·java·javascript
csj501 小时前
前端基础之《React(4)—webpack简介-编译打包优化》
前端·react
万少1 小时前
Trae AI 编辑器6大使用规则
前端·javascript·人工智能
好玩的Matlab(NCEPU)1 小时前
如何编写 Chrome 插件(Chrome Extension)
前端·chrome
Yan-英杰1 小时前
Deepseek大模型结合Chrome搜索爬取2025AI投资趋势数据
前端·chrome
Crystal3282 小时前
app里video层级最高导致全屏视频上的操作的东西显示不出来的问题
前端·vue.js
weixin_445476682 小时前
Vue+redis全局添加水印解决方案
前端·vue.js·redis
lecepin2 小时前
AI Coding 资讯 2025-10-29
前端·后端·面试
余道各努力,千里自同风2 小时前
小程序中获取元素节点
前端·小程序
PineappleCoder2 小时前
大模型也栽跟头的 Promise 题!来挑战一下?
前端·面试·promise