visibilitychange使用

visibilitychange

浏览器标签页被隐藏或显示的时候会触发visibilitychange事件.

使用场景：

背景音乐在使用home键退出的时候或者切换到其他app的时候音：乐应该停止播放。
使用vue在生命周期onHide中调用该方法，

注意：

我的音乐播放使用的是插件，相当于子组件，在子组件中onhide是无效的，需要在调用该子组件的位置即父组件的生命周期的onHide中调用

#####代码：
子组件：

audioPlay() {
    
    
	this.$emit('update:play', true);
},
audioPause() {
    
    
	this.$emit('update:play', false);
},
handleBtnClick() {
    
    
	this.$emit('update:play', !this.play);
	console.log("是否播放：",!this.play)
},

父组件：

onHide(){
    
    
	// this.loadMusic.stop()
	let that = this;
	that.$emit('update:play', false);
	that.$refs.child1.audioPause();
	console.log("shifoubofang?",this.play);
	document.addEventListener("visibilitychange", function() {
    
    
	  that.$refs.child1.audioPause();
	  if (document.hidden) {
    
    
	        that.$refs.child1.audioPause();
	      } else {
    
    
	        setTimeout(() => {
    
    
	         // that.$emit('update:play', true);
			 that.$refs.child1.audioPlay();
	        }, 2000)
	      }
	});
},