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

功能背景是类似小红书顶部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);
        }
    },
    // 监听页面滑动手势结束
    
相关推荐
曦曜292几秒前
富文本编辑器
javascript
你打不到我呢1 分钟前
nestjs入门:上手数据库与prisma
前端
多啦C梦a2 分钟前
React 实战:从 setInterval 到 useInterval,一次搞懂定时器 Hook(还能暂停!)
前端·javascript·react.js
闲不住的李先森8 分钟前
乐观更新
前端·react.js·设计模式
笔尖的记忆15 分钟前
【前端架构和框架】react组件化&数据流
前端·面试
zhangzelin88824 分钟前
TypeScript入门指南:JavaScript的类型化超集
前端·javascript·其他·typescript
小小前端_我自坚强29 分钟前
UniApp 微信小程序开发使用心得
面试·微信小程序·代码规范
lichenyang45331 分钟前
流式聊天界面实现解析:从零到一构建实时对话体验
前端
天蓝色的鱼鱼32 分钟前
Turbopack vs Webpack vs Vite:前端构建工具三分天下,谁将胜出?
前端·webpack
软件技术NINI42 分钟前
html css js网页制作成品——化妆品html+css+js (7页)附源码
javascript·css·html