app、h5上实现左滑、右滑返回上一页

下面的代码是我自用的，等后面空了再做成组件。先以代码的形式分享。由于ios本身就自带了功能，所以ios的左右滑功能我给过滤掉了(需要的话可以自己修改代码）。

第一步：将代码保存为组件

下面是代码，可以定义为 pageFooter.vue，以我自己的为例，我将文件放到了@/components/common/pageFooter.vue中
下面是代码：

<template>  
    <view v-if="platform != 'ios'">  
        <view class="left-side" @touchstart.stop="handleStart" @touchend.stop="handleEnd" v-if="leftDrag"></view>  
        <view class="right-side" @touchstart.stop="handleStart" @touchend.stop="handleEnd" v-if="rightDrag"></view>  
    </view>  
</template>  

<script>  
export default {  
    props: {  
        leftDrag: {  
            type: Boolean,  
            default: true  
        },  
        rightDrag: {  
            type: Boolean,  
            default: true  
        }  
    },  
    data() {  
        return {  
            startPosX: 0,  
            direction: 'left',  
            platform: uni.getSystemInfoSync().platform.toLowerCase(),  
            windowWidth: uni.getSystemInfoSync().windowWidth  
        };  
    },  
    methods: {  
        handleStart(e) {  
            if (!e.touches) {  
                return;  
            }  
            this.startPosX = e.touches[0].clientX;  
            this.direction = this.startPosX > this.windowWidth / 2 ? 'right' : 'left';  
        },  
        handleEnd(e) {  
            if (!e.changedTouches || !e.changedTouches[0]) {  
                return;  
            }  
            let pages = getCurrentPages(),  
                page = pages[pages.length - 1];  
            if (!page) {  
                return;  
            }  
            let x = e.changedTouches[0].clientX;  
            const offset = x - this.startPosX;  
            const canDrag = (this.direction == 'left' && offset >= 50) || (this.direction == 'right' && offset <= -50);  
            if (canDrag) {  
                this.startPosX = 0;  
                uni.navigateBack();  
            }  
        }  
    }  
};  
</script>  

<style lang="scss">  
@mixin pos {  
    position: fixed;  
    top: 0;  
    bottom: 0;  
    width: 40rpx;  
    opacity: 0.01;  
    background-color: $uni-bg-color;  
}  
.left-side {  
    @include pos;  
    left: 0;  
}  
.right-side {  
    @include pos;  
    right: 0;  
}  
</style>

第二步：在需要的地方引入组件也可以作为全局组件引入

全局组件引入方式

import pageFooter from '@/components/common/pageFooter.vue';  
Vue.component('pageFooter', pageFooter);

页面组件引入方式

<template>  
    <view>  
       <!-- your view code -->  
    </view>  
</template>  

<script>  
    import pageFooter from '@/components/common/pageFooter.vue';  
    export default {  
        components:{  
            pageFooter  
        }  
    }  
</script>  
<style></style>

第三步，在模板的最底部引用组件

<!-- this is you vue page -->  
<template>  
    <view>  
       <!-- your view code -->  

       <!-- leftDrag:开启右滑返回，rightDrag：开启左滑返回 -->  
       <pageFooter :leftDrag="true" :rightDrag="true"/>  
    </view>  
</template>  

<script>  
    import pageFooter from '@/components/common/pageFooter.vue';  
    export default {  
        components:{  
            pageFooter  
        }  
    }  
</script>  
<style></style>

注意事项

1. 由于是页面的左右两侧开启了40rpx的宽度用来作为用户左右滑的事件触发层，因此在这个位置的点击或者其他事件会失效。我自己的运用由于左右两边的边距基本上都在30rpx，因此影响不大，这个触发点的宽度可以自己修改；
2. 由于我自己的运用只有app和h5，因此小程序我没做测试。

不足之处

1. 本来想做下左滑跟手操作——手滑到哪页面跟到哪，但是发现页面抖动的厉害，暂时没想到好的办法处理，希望高手分享下；
2. 视频之类的页面有可能要用cover-view来做，不然在视频上面可能会失效。