全局组件,在小程序或app中,tabbar页面重新回到页面时,渲染错误
情景一:
main.js代码如下:
import glData from "./glData";
import loadingCp from "./components/loading.vue";
Vue.component("loadingCp",loadingCp);
Vue.prototype.$sLoading = function(){glData.dispatch("swLoading",true)};
Vue.prototype.$hLoading = function(){glData.dispatch("swLoading")};
glData/index.js:代码如下
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const glData = new Vuex.Store({
state: {
loading:false
},
mutations: {
switch_loading(state,tf){
if(tf){
state.loading=true
}else{
state.loading=false
}
}
},
actions:{
swLoading(ctx,tf){
var state = Vue.prototype.$glData.state;
if(tf&&state.loading){
return;
}else if(tf&&!state.loading){
ctx.commit("switch_loading",tf);
}else if(!tf&&state.loading){
ctx.commit("switch_loading",tf);
}
}
}
})
export default glData
组件loadingCp代码如下:
<template>
<view class="loading_box" v-show="is_loading" @tap.stop="returnfalse" @touchmove.stop="returnfalse">
{{is_loading}}<!-- 输出为true -->
<image class="loading rotate" src="/static/loading.png" mode="aspectFill"></image>
</view>
</template>
<script>
export default {
name:"loadingCp",
computed:{
is_loading(){
console.log(this.$glData.state.loading)//输出为false
return this.$glData.state.loading
}
},
methods:{
returnfalse(){
console.log("mask")
}
}
}
</script>
所有页面都引用这个组件
但是tabbar页面重新进入就会渲染错误,其它内页正常
情景二:
main.js代码:
import loadingCp from "./components/loading.vue";
Vue.component("loadingCp",loadingCp);
Vue.prototype.$eventHub = Vue.prototype.$eventHub || new Vue();
每个页面都会依次执行Vue.prototype.$eventHub.$emit("isShowLoading",true);Vue.prototype.$eventHub.$emit("isShowLoading",false);
组件loadingCp代码:
<template>
<view class="loading_box" v-show="isShow" @tap.stop="returnfalse" @touchmove.stop="returnfalse">
{{isShow}}<!-- 输出为true -->
<image class="loading rotate" src="/static/loading.png" mode="aspectFill"></image>
</view>
</template>
<script>
export default {
name:"loadingCp",
data() {
return {
isShow:false
}
},
created() {
this.$eventHub.$on('isShowLoading', (param) => {
this.isShow=param;
})
},
onShow() {
if(!this.$eventHub._events.isShowLoading){
this.isShow=false;
this.$eventHub.$on('isShowLoading', (param) => {
this.isShow=param;
})
}
},
onHide() {
this.$eventHub.$off('isShowLoading')
},
onUnload() {
this.$eventHub.$off('isShowLoading')
},
methods:{
returnfalse(){
console.log("mask");this.isShow=false
}
}
}
</script>
三个页面(page1,page2,page3)使用loadingCp组件
其中page2使用跳转方式为uni.redirectTo
多次走page1->page2->page3->page1后Vue.prototype.$eventHub.$emit("isShowLoading",false);失效
公用组件loadingCp内的data渲染错误(js内为false,页面渲染出来为true)
而且无法更改,点击事件returnfalse内改变为false也不能生效
panyh (作者)
已提供
2019-05-16 14:18
panyh (作者)
有重现和解决方案吗?
2019-05-17 15:52
panyh (作者)
使用了其它的方法(情景二),出现新的问题
2019-05-17 16:51