【柿饼派GUI】手势滑动翻页集合（四）

本文将介绍实现手势操作页面切换

在这里还是拿page1做主页面, 执行页面切换
首先需要绑定当前page的touch事件,在调用属性出设置函数名ontouch

    ontouch: function (event) {
        console.dir(event)
        // 绑定跳转页面函数
        pageSwitch(event, "up", function () { pm.navigateTo('pageup/pageup') }) 
        pageSwitch(event, "left", function () { pm.navigateTo('pageleft/pageleft') })
    },

---

在这里需要一个全局的函数来执行操作
打开app.js文件, 在编辑器里面创建全局函数 pageSwitch函数以及几个全局变量

/* 全局变量 */
var s_x = 0; // 开始X点
var s_y = 0; // 开始y点
var e_x = 0; // 结束X点
var e_y = 0; // 结束y点
/* --End-- */
pageSwitch = function (event, direction, func) {
    // 获取触摸页面状态
    var ttype = event.touchs[0].type;
    // console.dir(event)
    switch (ttype) {
        case 'touchstart': // 当触摸开始时记录触摸时的x,y坐标点
            this.s_x = event.touchs[0].x;
            this.s_y = event.touchs[0].y;
            this.e_x = this.e_y = 0
            return;
        case 'touchend': // 当触摸结束时记录触摸时的x,y坐标点
            this.e_x = event.touchs[0].x;
            this.e_y = event.touchs[0].y;
            break;
        default:
            return;
    }

    // 判断切换页面类型
    switch (direction) {
        case 'up':
            // 这里定义当移动超过99时进行跳转,小于99不进行跳转操作
            // 从下往上滑动超过100坐标点 
            if (parseInt(this.s_y - this.e_y) > 99) {
                console.log('upupup');
                func(); // 执行跳转操作
            }
            break;
        case 'left':
            // 从右往左滑动超过100坐标点
            if (this.s_x - this.e_x > 99) {
                console.log('leftleftleft');
                func(); // 执行跳转操作
            }
            break;
    }
};

如图展示: