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>
相关推荐
没有故事、有酒1 分钟前
Ajax介绍
前端·ajax·okhttp
朝新_5 分钟前
【SpringMVC】详解用户登录前后端交互流程:AJAX 异步通信与 Session 机制实战
前端·笔记·spring·ajax·交互·javaee
裴嘉靖7 分钟前
Vue 生成 PDF 完整教程
前端·vue.js·pdf
毕设小屋vx ylw2824269 分钟前
Java开发、Java Web应用、前端技术及Vue项目
java·前端·vue.js
冴羽1 小时前
今日苹果 App Store 前端源码泄露,赶紧 fork 一份看看
前端·javascript·typescript
蒜香拿铁1 小时前
Angular【router路由】
前端·javascript·angular.js
brzhang2 小时前
读懂 MiniMax Agent 的设计逻辑,然后我复刻了一个MiniMax Agent
前端·后端·架构
西洼工作室2 小时前
高效管理搜索历史:Vue持久化实践
前端·javascript·vue.js
广州华水科技2 小时前
北斗形变监测传感器在水库安全中的应用及技术优势分析
前端
开发者如是说2 小时前
Compose 开发桌面程序的一些问题
前端·架构