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>
相关推荐
微信开发api-视频号协议28 分钟前
企业微信外部群开发自动化实践过程
java·前端·微信·自动化·企业微信·ipad
甲维斯33 分钟前
Fable5:20美金的顶级设计师!
前端·人工智能
kyriewen1 小时前
我同时用了 Claude Code、Cursor 和 Codex,说说三个工具的真实差距——2026 年选错工具比不用 AI 更浪费时间
前端·ai编程·claude
CHB1 小时前
uni-app x 蒸汽模式 iOS版 性能测试基准报告 Benchmark
ios·uni-app·swiftui
Jackson__1 小时前
为了拯救我的腰椎和颈椎,我做了款浏览器插件!
前端·javascript·开源
衍生星球1 小时前
SpringBoot3 + Vue3 + 微信小程序如何学习,以及学哪些技术,组件
sql·微信小程序·uni-app·vue·springboot
闲猫1 小时前
Python FastAPI + SQLAlchemy 入门教程:从零搭建你的第一个 Web 应用
前端·python·fastapi
林小帅2 小时前
NestJS v11 + Prisma v7 ESM 迁移配置解析
前端·javascript·后端
IT_陈寒2 小时前
React的setState竟然不是立刻生效的,害我调试半天
前端·人工智能·后端
简简单单就是我_hehe2 小时前
前端埋点日志解决方案:完整 User-Agent 解析工具实现,爬虫识别、设备品牌、操作系统、浏览器版本全解析(附完整源码)
前端·爬虫