1、需求为:进入页面开始倒计时,离开页面倒计时重置。
2、发现问题:IOS系统中会有一个消息横幅的功能,场景为用户停留在页面中时,收到消息横幅,点击消息横幅弹出聊天框,倒计时仍在继续。需要改为点击消息横幅时倒计时暂停,回到页面倒计时继续。
3、监测生命周期:发现onShow会触发两回
- 第一次为页面刚打开
- 第二次为ios消息横幅关闭回到倒计时页面时
onLoad: function(options) {
// 页面创建时执行
},
onShow: function() {
// 页面出现在前台时执行
//ios消息横幅关闭时会触发
},
onHide: function() {
// 页面从前台变为后台时执行
//ios消息横幅打开时会触发
},
onUnload: function() {
// 页面销毁时执行
},
4、解决方案:
- var iosDia = false
- 在onLoad的时候this.iosDia = false
- 在onHide的时候可以判断是ios消息横幅打开,所以this.iosDia = true
- 在onShow的时候判断iosDia ,this.iosDia = true 的时候继续倒计时
- 最后别忘了要在onUnload中重置 this.iosDia = false
5、代码大略
<template>
<view>
<view class="countdown-block" >
本课程还需学习
<u-count-down ref="countDown" :time="countDownTime" format="HH:mm:ss" @finish="finishCountDown"></u-count-down>
</view>
</view>
</template>
<script>
var classtimer
export default {
data() {
return {
countDownTime: '',
iosDia:false,
}
},
onShow() {
if(!this.iosDia){
console.log('现在不是消息横幅');
}else{
console.log('现在是消息横幅');
this.runBack(this.countDownTime,this.iosType)
this.$refs.countDown.start();
}
},
onHide() {
this.iosDia = true
this.$refs.countDown.pause();
},
onLoad(e) {
this.iosDia = false
},
onUnload() {
this.iosDia = false
clearTimeout(classtimer)
},
methods: {
runBack(cm, type) {
this.countDownTime = cm
},
}
}
</script>
<style lang="scss" scoped>
</style>