panyh
panyh
  • 发布:2019-05-15 22:15
  • 更新:2019-05-17 14:58
  • 阅读:169

【报Bug】公用组件渲染错误

分类:uni-app

全局组件,在小程序或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也不能生效

2019-05-15 22:15 分享
已邀请:
DCloud_UNI_CHB

DCloud_UNI_CHB

提供一份完整代码

  • panyh (作者)

    已提供

    2019-05-16 14:18

  • panyh (作者)

    有重现和解决方案吗?

    2019-05-17 15:52

  • panyh (作者)

    使用了其它的方法(情景二),出现新的问题

    2019-05-17 16:51

panyh

panyh (作者)

公用组件的渲染问题,有较好的方案吗,用于全部页面的

  • aaaa1182527245@163.com

    = -= 我有个项目也是的 公共组件老是出问题 最后还是每个页面都单独写了一份。很烦

    2019-05-17 15:05

要回复问题请先登录注册