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>
相关推荐
lbh17 小时前
当我开始像写代码一样和AI对话,一切都变了
前端·openai·ai编程
We་ct18 小时前
LeetCode 918. 环形子数组的最大和:两种解法详解
前端·数据结构·算法·leetcode·typescript·动态规划·取反
wefly201719 小时前
m3u8live.cn 在线M3U8播放器,免安装高效验流排错
前端·后端·python·音视频·前端开发工具
C澒19 小时前
微前端容器标准化 —— 公共能力篇:通用打印
前端·架构
德育处主任Pro19 小时前
前端元素转图片,dom-to-image-more入门教程
前端·javascript·vue.js
木斯佳19 小时前
前端八股文面经大全:小红书前端一二面OC(下)·(2026-03-17)·面经深度解析
前端·vue3·proxy·八股·响应式
陈天伟教授20 小时前
人工智能应用- 预测新冠病毒传染性:04. 中国:强力措施遏制疫情
前端·人工智能·安全·xss·csrf
zayzy20 小时前
前端八股总结
开发语言·前端·javascript
今天减肥吗20 小时前
前端面试题
开发语言·前端·javascript
Rabbit_QL20 小时前
【前端UI行话】前端 UI 术语速查表
前端·ui·状态模式