h5通用返回上一页动画

仿微信手势右滑返回上一页

先创建一个构造函数用来装方法也方便区分其他的代码

let slideLeftBack = {};

创建几个参数判断是否可以右滑，第一次按下的坐标，按下到松开的时间

        // 是否能滑动
        isSlide: false,
        //记录第一次按下的时间
        slideTime: null,
        // 获取手指按下的x坐标
        startX: 0,

下面创建一个方法来接收哪个容器需要添加右滑返回

        getEle(element) {
            // im聊天内容层
            slideLeftBack.ele = $(`${element}`);
            return this;
        },

我们调用的时候可以slideLeftBack.getEle('XXXX')传入需要绑定的容器，

创建实例化监听聊天层触摸方法监听刚刚传入的容器的触摸事件

        /*
        * @description: 实例化监听聊天层触摸
        * @time: 2020/9/21
        */
        init() {
            slideLeftBack.ele[0].addEventListener('touchstart', slideLeftBack.touch, false);
            slideLeftBack.ele[0].addEventListener('touchmove', slideLeftBack.touch, false);
            slideLeftBack.ele[0].addEventListener('touchend', slideLeftBack.touch, false);
            return this;
        },

下面就是对触摸事件的处理

        touch: function (event) {
            "use strict"
            let _this = slideLeftBack;
            event = event || window.event;
            switch (event.type) {
                case 'touchstart':
                    slideLeftBack.ele.css('transition', 'none')
                    //当触摸到容器左边35像素以内的区域 就触发
                    if (Math.floor(event.touches[0].clientX) <= 35) {
                        _this.isSlide = true;
                        _this.startX = event.touches[0].clientX;
                        _this.slideTime = Math.floor(event.timeStamp)
                        console.log('触摸边缘', event.touches[0].clientX, _this.isSlide);
                    } else {
                        _this.isSlide = false;
                    }
                    break;
                case 'touchmove':
                    //阻止冒泡
                    event.preventDefault();
                    if (_this.isSlide) {
                        console.log('往右滑动', event.changedTouches[0].clientX);
                        //这里不用多做处理 直接吧手指移动的距离传给容器就好了 
                        _this.ele.css('transform', `translateX(${event.changedTouches[0].clientX}px)`)
                    }
                    break;
                case 'touchend':
                    _this.ele.css('transition', 'all 0.3s');
                    if (slideLeftBack.isSlide) {
                          //  如果向右滑动的距离大于50像素并且是在300毫秒内结束滑动动作的就直接返回上一页
                        if (Math.floor(event.timeStamp) - _this.slideTime <= 300 &&    Math.round(event.changedTouches[0].clientX) - Math.round(_this.startX) > 50) {
                            _this.ele.css('transform', `translateX(${_this.ele.width()}px)`)
                        } else if (Math.round(event.changedTouches[0].clientX) - Math.round(slideLeftBack.startX) <= 0) {//滑动距离为负数的不返回
                            _this.ele.css('transform', 'translateX(0)')
                        } else if (event.changedTouches[0].clientX - ((_this.ele.width() / 2) - 50) >= 0) {
//滑动距离大于屏幕宽度的一半就返回
                            _this.ele.css('transform', `translateX(${_this.ele.width()}px)`)
                        } else {
                            _this.ele.css('transform', 'translateX(0)')
                        }
                        _this.isSlide = false
                        _this.startX = 0
                        _this.slideTime = 0
                    }
                    break;
            }
        }

到这里已经完成了
我们监听window加载调用绑定滑动的方法

window.addEventListener('load', slideLeftBack.getEle('.content').init(), false)

全部的js代码

    let slideLeftBack = {
        // 是否能滑动
        isSlide: false,
        //
        slideTime: null,
        // 获取手指按下的x坐标
        startX: 0,
        getEle(element) {
            // im聊天内容层
            slideLeftBack.ele = $(`${element}`);
            return this;
        },
        /*
        * @description: 实例化监听聊天层触摸
        * @time: 2020/9/21
        */
        init() {
            slideLeftBack.ele[0].addEventListener('touchstart', slideLeftBack.touch, false);
            slideLeftBack.ele[0].addEventListener('touchmove', slideLeftBack.touch, false);
            slideLeftBack.ele[0].addEventListener('touchend', slideLeftBack.touch, false);
            return this;
        },
        touch: function (event) {
            "use strict"
            let _this = slideLeftBack;
            event = event || window.event;
            switch (event.type) {
                case 'touchstart':
                    slideLeftBack.ele.css('transition', 'none')
                    if (Math.floor(event.touches[0].clientX) <= 35) {
                        _this.isSlide = true;
                        _this.startX = event.touches[0].clientX;
                        _this.slideTime = Math.floor(event.timeStamp)
                        console.log('触摸边缘', event.touches[0].clientX, _this.isSlide);
                    } else {
                        _this.isSlide = false;
                    }
                    break;
                case 'touchmove':
                    event.preventDefault();
                    if (_this.isSlide) {
                        console.log('往右滑动', event.changedTouches[0].clientX);
                        _this.ele.css('transform', `translateX(${event.changedTouches[0].clientX}px)`)
                    }
                    break;
                case 'touchend':
                    _this.ele.css('transition', 'all 0.3s');
                    if (slideLeftBack.isSlide) {
                        if (Math.floor(event.timeStamp) - _this.slideTime <= 300 && Math.round(event.changedTouches[0].clientX) - Math.round(_this.startX) > 50) {
                            _this.ele.css('transform', `translateX(${_this.ele.width()}px)`)
                        } else if (Math.round(event.changedTouches[0].clientX) - Math.round(slideLeftBack.startX) <= 0) {
                            _this.ele.css('transform', 'translateX(0)')
                        } else if (event.changedTouches[0].clientX - ((_this.ele.width() / 2) - 50) >= 0) {
                            _this.ele.css('transform', `translateX(${_this.ele.width()}px)`)
                        } else {
                            _this.ele.css('transform', 'translateX(0)')
                        }
                        _this.isSlide = false
                        _this.startX = 0
                        _this.slideTime = 0
                    }
                    break;
            }
        }
    }