uni-app uni.preloadPage在vue3+nvue的情况下 onshow和onhide监听事件错乱

uni-app uni.preloadPage在vue3+nvue的情况下 onshow和onhide监听事件错乱

开发环境 版本号 项目创建方式
Windows 22H2 HBuilderX
Android Android 11 -
OPPO - -
reno - -

产品分类：uniapp/App

PC开发环境操作系统：Windows

PC开发环境操作系统版本号：22H2

HBuilderX类型：正式

HBuilderX版本号：4.08

手机系统：Android

手机系统版本号：Android 11

手机厂商：OPPO

手机机型：reno

页面类型：nvue

vue版本：vue3

打包方式：云端

项目创建方式：HBuilderX

示例代码：

<template>  
    <view v-for="(item,index) in uid_array" class="content" @click="goto(item)">  
        <image class="logo" src="/static/logo.png"></image>  
        <view class="text-area">  
            <text class="title">{{item}}</text>  
        </view>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Hello',  
                uid_array: [1, 2, 3]  
            }  
        },  
        onLoad() {  
            this.uid_array.map((item,index)=>{  
                uni.preloadPage({  
                    url: "/pages/index/sub?uid="+item,  
                    success(r) {   
                        console.log('测试页面'+item+'预加载成功');    
                    },  
                    fail(e) {  
                        console.log(e);  
                    }  
                })   
            })  

        },  
        methods: {  
            goto(item)  
            {  
                uni.navigateTo({  
                    url:'/pages/index/sub?uid='+item  
                })  
            }  
        }  
    }  
</script>  

<style>  
    .content {  
        display: flex;  
        flex-direction: column;  
        align-items: center;  
        justify-content: center;  
    }  

    .logo {  
        height: 200rpx;  
        width: 200rpx;  
        margin-top: 200rpx;  
        margin-left: auto;  
        margin-right: auto;  
        margin-bottom: 50rpx;  
    }  

    .text-area {  
        display: flex;  
        justify-content: center;  
    }  

    .title {  
        font-size: 36rpx;  
        color: #8f8f94;  
    }  
</style>

<template>  

</template>  

<script>  
    export default {  
        data() {  
            return {  
                uid:0  
            }  
        },  
        onLoad(options) {  
            this.uid=options.uid;  
            console.log('group页面加载',this.uid);  
        },  
        onShow()  
        {  
            console.log('group页面显示',this.uid);  
        },  
        onHide()  
        {  
            console.log('group页面隐藏',this.uid);  
        },  
        methods: {  
        }  
    }  
</script>  

<style>  

</style>

更多关于uni-app uni.preloadPage在vue3+nvue的情况下 onshow和onhide监听事件错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

顶顶啊

更多关于uni-app uni.preloadPage在vue3+nvue的情况下 onshow和onhide监听事件错乱的实战教程也可以访问 https://www.itying.com/category-93-b0.html


不要沉

人呢？

好惨 我的问题也没人理

在 uni-app 中使用 uni.preloadPage 预加载页面时，特别是在 vue3 和 nvue 的情况下，可能会遇到 onshow 和 onhide 监听事件错乱的问题。这个问题通常是由于页面生命周期事件的触发顺序或预加载机制导致的。

可能的原因

  1. 预加载页面的生命周期事件触发顺序：预加载页面时，页面可能会提前触发 onLoad 和 onShow 等生命周期事件，而主页面的事件触发顺序可能会受到影响。
  2. nvue 页面的特殊性：nvue 页面是基于原生渲染的，与 vue 页面的生命周期事件触发机制可能有所不同，导致事件错乱。
  3. 事件监听器的重复绑定：在 vue3 中，某些情况下可能会重复绑定事件监听器，导致事件被多次触发。

解决方案

  1. 检查生命周期事件的绑定顺序：

    • 确保在 onLoad 或 onShow 中正确绑定事件监听器，并在 onUnload 或 onHide 中移除事件监听器，避免重复绑定。

  2. 使用 uni.$on 和 uni.$off 进行全局事件管理：

    • 可以通过 uni.$on 和 uni.$off 来管理全局事件，避免直接在生命周期事件中绑定和移除事件监听器。
    export default {
  onShow() {
    uni.$on('pageShow', this.handlePageShow);
  },
  onHide() {
    uni.$off('pageShow', this.handlePageShow);
  },
  methods: {
    handlePageShow() {
      console.log('Page is shown');
    }
  }
}

  3. 避免在预加载页面中执行过多操作：

    • 预加载页面时，尽量避免在 onLoad 或 onShow 中执行过多的逻辑操作，以免影响主页面的事件触发。

  4. 使用 vue3 的 setup 函数管理生命周期事件：

    • 在 vue3 中，可以使用 setup 函数来管理生命周期事件，确保事件监听器的正确绑定和移除。
    import { onMounted, onUnmounted } from 'vue';

export default {
  setup() {
    const handlePageShow = () => {
      console.log('Page is shown');
    };

    onMounted(() => {
      uni.$on('pageShow', handlePageShow);
    });

    onUnmounted(() => {
      uni.$off('pageShow', handlePageShow);
    });

    return {
      handlePageShow
    };
  }
}

  5. 调试和日志记录：

    • 在 onshow 和 onhide 中添加日志记录，检查事件的触发顺序和频率，帮助定位问题。
    export default {
  onShow() {
    console.log('Page is shown');
  },
  onHide() {
    console.log('Page is hidden');
  }
}
回到顶部