小程序全面屏手势配置案例

---

前言

• 文章提到的全面屏手势包括有 “左右滑动、放大缩小、双击、长按” ；
• 有关以上四类事件的配置可见博客 小程序更多的手势事件配置 。

---

一、案例

1、目录结构

2、示例代码

• touch.wxml文件下：

<view class="bg" bindtouchstart="myTouchStart" bindtouchmove="myTouchMove" bindtouchend="myTouchEnd" bindlongtap="myLongTap" bindtap="myTap">
</view>

• touch.wxss文件下：

.bg {
    
    min-width: 100vw;
    min-height: 100vh;
    overflow: hidden;
}

• touch.js文件下：

//=======================手势事件模块=======================
let lastTapTime = 0, //记录上一次点击时间
    zoomFlag = false, //定义 缩放事件 节流阀
    distance = 0, //记录手指移动距离
    scale = 1, //定义初始化的页面缩放大小
    newScale = 0, //记录新的页面缩放大小
    slipFlag = false, //定义 滑动事件 节流阀
    startPoint = 0, //记录滑动的初始位置
    slip_zoom_flag = true //定义滑动-缩放节流阀

let gestureFlag = false //定义手势功能节流阀,可用该变量使得全面屏手势触发时屏蔽页面组件的一般事件
//=====================手势事件模块end======================

Page({
    
    /** * 页面的初始数据 */
    data: {
    
        
    },
    myTouchStart(e) {
    
        // 关闭手势功能节流阀
        gestureFlag = false
        //打开滑动-缩放节流阀
        slip_zoom_flag = true

        // ---------------------记录滑动事件信息---------------------
        //开启滑动事件
        slipFlag = true
        //记录触摸点的坐标信息
        startPoint = e.touches[0]
        //---------------------记录滑动事件信息end---------------------

        //---------------------记录缩放事件信息---------------------
        // 单手指缩放开始，不做任何处理
        if (e.touches.length == 1) return;
        // 当两根手指放上去的时候，将距离(distance)初始化。
        let xMove = e.touches[1].clientX - e.touches[0].clientX;
        let yMove = e.touches[1].clientY - e.touches[0].clientY;
        //计算开始触发两个手指坐标的距离
        distance = Math.sqrt(xMove * xMove + yMove * yMove);
        //---------------------记录缩放事件信息end---------------------
    },
    myTouchMove(e) {
    
        // ----------------监听手势缩小放大事件----------------
        // 单手指缩放不做任何操作
        if (e.touches.length != 1) {
    
            //关闭滑动-缩放节流阀，放置触发滑动事件
            slip_zoom_flag = false
            //双手指运动 x移动后的坐标和y移动后的坐标
            let xMove = e.touches[1].clientX - e.touches[0].clientX;
            let yMove = e.touches[1].clientY - e.touches[0].clientY;
            //双手指运动新的 ditance
            let newDistance = Math.sqrt(xMove * xMove + yMove * yMove);
            //计算移动的过程中实际移动了多少的距离
            let distanceDiff = newDistance - distance;
            newScale = scale + 0.005 * distanceDiff
            // 打开缩放监听
            zoomFlag = true
            //打开手势功能节流阀
            gestureFlag = true
            return
        }
        // ----------------监听手势缩小放大事件end----------------

        // ----------------监听手势右滑事件----------------
        if (((startPoint.clientX - e.touches[e.touches.length - 1].clientX) > 80) && slipFlag && slip_zoom_flag) {
    
            console.log("左滑事件");
            slipFlag = false
            //打开手势功能节流发
            gestureFlag = true
            return
        } else if (((startPoint.clientX - e.touches[e.touches.length - 1].clientX) < -80) && slipFlag && slip_zoom_flag) {
    
            console.log("右滑事件");
            slipFlag = false
            //打开手势功能节流发
            gestureFlag = true
            return
        }
        // ----------------监听手势右滑事件end----------------
    },
    myTouchEnd() {
    
        if (zoomFlag) {
    
            if (newScale > 1.3) {
    
                console.log("放大了");
            } else if (newScale < 0.7) {
    
                console.log("缩小了");
            }
            // 关闭缩放监听
            zoomFlag = false
        }
    },
    myLongTap() {
    
        console.log("长按事件");
        // 开启手势控制节流阀
        gestureFlag = true
    },
    myTap(e) {
    
        // 监听双击事件
        let curTime = e.timeStamp
        if (lastTapTime > 0) {
    
            if (curTime - lastTapTime < 300) {
    
                console.log("双击屏幕事件");
            }
        }
        lastTapTime = curTime
    },

    /** * 生命周期函数--监听页面加载 */
    onLoad: function (options) {
    },


    /** * 生命周期函数--监听页面初次渲染完成 */
    onReady: function () {
    },

    /** * 生命周期函数--监听页面显示 */
    onShow: function () {
    },

    /** * 生命周期函数--监听页面隐藏 */
    onHide: function () {
    },

    /** * 生命周期函数--监听页面卸载 */
    onUnload: function () {
    },

    /** * 页面相关事件处理函数--监听用户下拉动作 */
    onPullDownRefresh: function () {
    },

    /** * 页面上拉触底事件的处理函数 */
    onReachBottom: function () {
    },

    /** * 用户点击右上角分享 */
    onShareAppMessage: function () {
    }
})

提示：文章到此结束，文章仅为个人学习记录，若有不足还请大家指出。