父页面
<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>
yoooo
uni.$off 具体怎么用才能只执行一次 onShow
2020-06-30 14:59