小程序判断滑动方向

20 阅读1分钟
 <view bindtouchstart="handleTouchStartView" bindtouchmove="handleTouchMoveView" bindtouchend="handleTouchEndView"/>
 handleTouchStartView(event) {
        // 记录触摸开始时的位置
        this.data.startX = event.touches[0].pageX;
        this.data.startY = event.touches[0].pageY;
    },
    handleTouchMoveView(event) {
        // 这里不处理移动逻辑,因为移动时不需要做太多计算,只在触摸结束时判断方向
    },
    handleTouchEndView(event) {
        // 记录触摸结束时的位置
        this.data.endX = event.changedTouches[0].pageX;
        this.data.endY = event.changedTouches[0].pageY;
        // 计算滑动方向
        this.calculateDirection();
    },
     calculateDirection() {
        let { tabData, switchTabIndex, switchTabItem } = this.data
        const startX = this.data.startX;
        const startY = this.data.startY;
        const endX = this.data.endX;
        const endY = this.data.endY;
        const deltaX = endX - startX; // X轴的滑动距离
        const deltaY = endY - startY; // Y轴的滑动距离
        const absDeltaX = Math.abs(deltaX); // X轴的绝对值距离
        const absDeltaY = Math.abs(deltaY); // Y轴的绝对值距离
        // 判断滑动方向,这里可以根据需求调整阈值,例如5px或更多,以减少误判
        if (absDeltaX > absDeltaY) { // 如果X轴滑动距离大于Y轴,则认为是水平滑动
            if (deltaX > 0) { // 向右滑动
                console.log('向右滑动');
                if (tabData.length > 1) {
                    switchTabIndex--
                    if (switchTabIndex < 0) {
                        switchTabIndex = 0
                    }
                }
            } else { // 向左滑动
                console.log('向左滑动');
                if (tabData.length > 1) {
                    switchTabIndex++
                    if (switchTabIndex > tabData.length - 1) {
                        switchTabIndex = tabData.length - 1
                    }
                }
            }
            let item = tabData[switchTabIndex]
            let tempTopHeadBgImg = this.getTopHeadBgImg(item.businessCode)
            tabData.forEach((v, i) => {
                v.isCheck = i == switchTabIndex ? true : false
            })

            //切换不同业务类型标签换图片背景,默认是原来的pos业务
            // let tempTopHeadBgImg = index == 2 ? "pbtopbg@2x.png" : "topbg@2x.png"
            this.setData({
                switchTabIndex: switchTabIndex,
                switchTabItem: item,
                tabData,
                topHeadBgImg: tempTopHeadBgImg
            })
        } else { // 如果Y轴滑动距离大于X轴,则认为是垂直滑动,不做额外处理或根据需要处理垂直滑动逻辑
            // 这里可以添加垂直滑动的处理逻辑,比如下拉刷新等。
        }
    },