澐淡2020
澐淡2020
  • 发布:2020-05-09 21:03
  • 更新:2020-05-09 22:08
  • 阅读:1106

【报Bug】多次从父页面打开子页面,然后返回,从第二次返回起父页面的onShow会多次触发。

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

HBuilderX类型: 正式

HBuilderX版本号: 2.6.16

手机系统: Android

手机系统版本号: Android 10

手机厂商: 魅族

手机机型: Pro5

页面类型: vue

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

父页面


<template>  
    <view class="content">  
        <view class="text-area my-m-t-100">  
            <text class="title">{{title}}</text>  
        </view>  
        <view class="text-area my-m-t-100">  
            <text class="text-content">Bug说明:点击 Open 按钮打开子页面,然后返回父页面,多次点开子页面再返回父页面,观察输出日志会发现:从第二次返回开始,父页面的onShow()会多次触发!</text>  
        </view>  
        <view class="text-area my-m-t-100">  
            <button type="primary" class="my-but" @tap.stop="openPage">Open</button>  
        </view>  
    </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                title: 'Bug测试代码!'  
            }  
        },  
        onShow: function() {  
            uni.$on('page-popup', (data) => {  
                if (data.editState == "ok") {  
                    let date = new Date();  
                    console.log("onShow ----- 父页 ----- " + date.getTime());  
                }  
            });  
        },  
        onLoad: function() {  
        },  
        methods: {  
            openPage: function() {  
                uni.navigateTo({  
                    url: './testpage',  
                    animationType: 'slide-in-right',  
                    animationDuration: 300  
                })  
            }  
        }  
    }  
</script>  
<style>  
    .content {display: flex;flex-direction: column;align-items: center;justify-content: center;}  

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

    .title {font-size: 36rpx;color: #8f8f94;}  

    .my-m-t-100 {margin-top: 100rpx;}  

    .text-content {font-size: 30rpx;color: #2C405A;line-height: 50rpx;margin: 0 40rpx;}  

    .my-but {width: 300rpx;font-size: 32rpx;color: #FFFFFF;background-color: #3F536E;}  

</style>  

子页面:(需要在 page.js 中隐藏默认头)


<template>  
<view class="content">  
<view class="text-area my-m-t-100">点击返回,返回父页面!</view>  
<view class="text-area my-m-t-100">  
<button type="primary" class="my-but" @tap.stop="goback">返回</button>  
</view>  
</view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                title: 'Bug测试代码!'  
            }  
        },  
        onShow: function() {  
        },  
        onLoad: function() {  
             let date = new Date();  
            console.log("子页面 ****************************** " + date.getTime());  
        },  
        methods: {  
            goback: function() {  
                uni.$emit('page-popup', {  
                    'editState': 'ok'  
                });  
                uni.navigateBack({  
                    animationType: 'slide-out-right',  
                    animationDuration: 300  
                })  
            }  
        }  
    }  
</script>  
<style>  
    .content {display: flex;flex-direction: column;align-items: center;justify-content: center;}  

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

    .title {font-size: 36rpx;color: #8f8f94;}  

    .my-m-t-100 {margin-top: 100rpx;}  

    .text-content {font-size: 30rpx;color: #2C405A;line-height: 50rpx;margin: 0 40rpx;}  

    .my-but {width: 300rpx;font-size: 32rpx;color: #FFFFFF;background-color: #3F536E;}  
</style>  

操作步骤:

前面已有描述,另外还有上传的测试代码。

如果不用 uni.$on 接收传回父页面的值,问题不会出现

预期结果:

onShow 不能重复多次执行!

实际结果:

onShow 重复多次执行!

输出日志如下:


20:41:02.808 子页面 **************\*\*************** 1589028062791 at pages\index\testpage.vue:22  
20:41:04.346 onShow ----- 父页 ----- 1589028064343 at pages\index\index.vue:25  
20:41:07.345 子页面 **************\*\*************** 1589028067342 at pages\index\testpage.vue:22  
20:41:08.423 onShow ----- 父页 ----- 1589028068420 at pages\index\index.vue:25  
20:41:08.424 onShow ----- 父页 ----- 1589028068421 at pages\index\index.vue:25  
20:41:09.286 子页面 **************\*\*************** 1589028069282 at pages\index\testpage.vue:22  
20:41:09.890 onShow ----- 父页 ----- 1589028069887 at pages\index\index.vue:25  
20:41:09.891 onShow ----- 父页 ----- 1589028069887 at pages\index\index.vue:25  
20:41:09.902 onShow ----- 父页 ----- 1589028069888 at pages\index\index.vue:25  
20:41:10.729 子页面 **************\*\*************** 1589028070725 at pages\index\testpage.vue:22  
20:41:11.215 onShow ----- 父页 ----- 1589028071212 at pages\index\index.vue:25  
20:41:11.234 onShow ----- 父页 ----- 1589028071213 at pages\index\index.vue:25  
20:41:11.235 onShow ----- 父页 ----- 1589028071213 at pages\index\index.vue:25  
20:41:11.235 onShow ----- 父页 ----- 1589028071214 at pages\index\index.vue:25  
20:41:12.070 子页面 **************\*\*************** 1589028072067 at pages\index\testpage.vue:22  
20:41:12.611 onShow ----- 父页 ----- 1589028072609 at pages\index\index.vue:25  
20:41:12.625 onShow ----- 父页 ----- 1589028072610 at pages\index\index.vue:25  
20:41:12.626 onShow ----- 父页 ----- 1589028072610 at pages\index\index.vue:25  
20:41:12.626 onShow ----- 父页 ----- 1589028072610 at pages\index\index.vue:25  
20:41:12.626 onShow ----- 父页 ----- 1589028072611 at pages\index\index.vue:25  
20:55:17.554 子页面 **************\*\*************** 1589028917545 at pages\index\testpage.vue:22  

bug描述:

用 uni.$on('page-popup', (data)=>{ }) 从子页面传值加父页面。

打开子页面,然后返回父页面,多次点开子页面再返回父页面。

观察输出日志会发现:从第二次返回开始,父页面的onShow()会多次触发!

2020-05-09 21:03 负责人:无 分享
已邀请:
澐淡2020

澐淡2020 (作者)

我怎么一发问题就找到解决方法了??

已解决!不好意思!

用uni.$off关闭监听就OK了!

  • yoooo

    uni.$off 具体怎么用才能只执行一次 onShow

    2020-06-30 14:59

该问题目前已经被锁定, 无法添加新回复