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

功能背景是类似小红书顶部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);
        }
    },
    // 监听页面滑动手势结束
    
相关推荐
J总裁的小芒果6 分钟前
el-table 自定义列、自定义数据
前端·javascript·vue.js
晚风予星8 分钟前
简记|React+Antd中实现 tooltip、ellipsis、copyable功能组件
前端·react.js
brzhang15 分钟前
告别『上线裸奔』!一文带你配齐生产级 Web 应用的 10 大核心组件
前端·后端·架构
程序员Bears15 分钟前
深入理解CSS3:Flex/Grid布局、动画与媒体查询实战指南
前端·css3·媒体·visual studio code
工呈士22 分钟前
CSS in JS:机遇与挑战的思考
javascript·css
至尊童24 分钟前
五个JavaScript 应用技巧
javascript
David凉宸27 分钟前
凉宸推荐给大家的一些开源项目
前端
举个栗子dhy28 分钟前
编辑器、代码块、大模型AI对话中代码复制功能实现
javascript
袋鱼不重29 分钟前
Cursor 最简易上手体验:谷歌浏览器插件开发3s搞定!
前端·后端·cursor
hyyyyy!29 分钟前
《从分遗产说起:JS 原型与继承详解》
前端·javascript·原型模式