uniApp App内嵌H5打开内部链接,返回手势(左滑右滑页面)会直接关闭H5项目

uniApp App内嵌H5打开内部链接,左滑右滑页面会直接关闭H5项目,退出应用,而不是我想要的返回上一级页面。

处理方法如下图:

App.vue具体代码:

javascript 复制代码
<template>
    <div id="app" data-theme="default">
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive" />
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive" />
    </div>
</template>

<script>
import Vue from 'vue'
export default {
    data() {
        return {
        }
    },
    created() {
        // 监听网络状态变化
        window.addEventListener('online', this.handleOnline)
        window.addEventListener('offline', this.handleOffline)
        // 监听页面加载错误
        window.addEventListener('error', this.handlePageError)
    },
    mounted() {
        window.onerror = (message, source, lineno, colno, error) => {
            if (error && error.stack) {
                console.log(error, 'error')
                this.$toast('网络异常,请检查网络连接')
            }
            return true
        }
        // document.documentElement.style.setProperty(
        //         '--statusbar-height',
        //        '30px'
        //     )
        window.getBarStatusHeightCallback = res => { 
            Vue.prototype.$barHeight = res
            console.log('状态栏高度', res)
            document.documentElement.style.setProperty(
                '--statusbar-height',
                `${res}px`
            )
        }
        
        // 待触发 `UniAppJSBridgeReady` 事件后,即可调用 uni 的 API。
        document.addEventListener('UniAppJSBridgeReady', () => {
            uni.webView.getEnv(res => {
                console.log('当前环境:' + JSON.stringify(res), uni)
                Vue.prototype.$Env = res
            })
            uni.postMessage({
                data: {
                    type: 'getBarHeight',
                    msg: '获取状态栏高度'
                }
            })
        })
        // 滑动返回
        let startX = 0
        document.addEventListener('touchstart', e => {
            startX = e.touches[0].clientX
        })
        document.addEventListener('touchmove', e => {
            e.preventDefault() // 阻止默认返回行为
            const per = document.body.clientWidth / 5 // 页面宽度分成5份
            if (startX < per || startX > per * 4) { // 控制开始触碰点在小于页面的五分之一或者大于页面的五分之四氛围内有效
                const deltaX = e.touches[0].clientX - startX
                if (Math.abs(deltaX) > 50) { // 左滑、右滑,阈值50px
                    this.$router.goBack()
                    // if (!['/home', '/my'].includes(this.$route.matched[0].path)) {
                    //     this.$router.goBack()
                    // }
                }
            }
        })
    },
    beforeDestroy() {
        // 移除事件监听,避免内存泄露
        window.removeEventListener('online', this.handleOnline)
        window.removeEventListener('offline', this.handleOffline)
        window.removeEventListener('error', this.handlePageError)
    },
    methods: {
        handleOnline() {
            console.log('网络连接恢复')
            // 处理逻辑,例如提示用户或重试操作
        },
        handleOffline() {
            console.log('网络连接断开')
            this.$toast('网络异常,请检查网络连接')
            // 处理逻辑,例如提示用户网络不给力
        },
        handlePageError(event) {
            console.error('页面加载出错', event.target.src)
            this.$toast('网络异常,请检查网络连接')
            // 处理逻辑,例如提示用户或重定向到错误页面
        }
    }
}
</script>

<style lang="scss" scoped>
:root {
    --statusbar-height: 0; //状态栏高度
    --primary-color: #24a854;
}

#app {
    height: 100%;
    // overflow: auto;
    * {
        touch-action: pan-y;
    }
}

::v-deep(.van-button--block) {
    border-radius: 14px;
}

</style>
相关推荐
用户600071819107 小时前
【翻译】React 如何乱序流式输出 UI,却仍保持最终顺序
前端
江南十四行7 小时前
AI Agent应用类型及Function Calling开发实战(三)
服务器·前端·javascript
GISer_Jing7 小时前
AI原生全栈架构理论体系:从分布式范式演进到全链路工程化理论基石
前端·人工智能·学习·ai编程
GISer_Jing7 小时前
从“切图仔”到“增长架构师”:AI时代营销前端的范式革命
前端·人工智能·ai编程
广州华水科技7 小时前
单北斗GNSS在水库变形监测中的应用与系统安装解析
前端
xingpanvip7 小时前
星盘接口开发文档:组合三限盘接口指南
android·开发语言·前端·python·php·lua
阿拉丁的梦8 小时前
blender最好的多通道吸色工具(拾取纹理颜色排除灯光)
前端·html
吴声子夜歌8 小时前
Vue3——脚手架Vite
前端·javascript·vue.js·vite
摘星编程8 小时前
当AI开始学会“使用工具“——从ReAct到MCP,大模型如何获得真正的行动力
前端·人工智能·react.js
light blue bird8 小时前
设备数据变化上传图表数据汇总组件
大数据·前端·信息可视化