关于自定义TabBar消息 未读 | 已读 状态问题？
<template>
<uni-transition mode-class="fade" :duration="200" :show="true">
<view class="main_box">
<index v-if="currentIndex === 0"></index>
<myDoctor v-if="currentIndex === 1"></myDoctor>
<message v-if="currentIndex === 2"></message>
<prescript v-if="currentIndex === 3"></prescript>
<my v-if="currentIndex === 4"></my>
</view>
<view class="foot_box">
<!-- <custom-tab-bar ref='tabbar' :currentIndex="currentIndex" @update:currentIndex="updateCurrentIndex">
</custom-tab-bar> -->
<uni-transition mode-class="fade" :duration="200" :show="true">
<view>
<view class="tab-content">
<slot />
</view>
<view class="tabbar">
<view class="navigator">
<view ref='warpper' class="warpper">
<view ref="navItem" class="navigator-item" v-for="(item,index) in tabBar.list"
:key="item.pagePath" @click="switchTab(item,index)" :data-index='index'>
<img :src="item.iconPath" class="icon" v-if="selectedIndex !== index">
<img :src="item.selectedIconPath"
:class="[item.selectIconStyle ? 'icon-select' : 'icon']" v-else>
<text
:class="['item-text',{'text-active':selectedIndex === index}]">{{item.text}}</text>
<view v-if="item.hasUnreadMessage" class="unread-dot"></view>
</view>
</view>
</view>
</view>
</view>
</uni-transition>
</view>
</uni-transition>
</template>
<script>
import {
FILE_URL
} from '../../api/base_api.js';
import {
GET_MESSAGE
} from '../../api/user.js';
var Hub = require('../../utils/signalR.js')
var $th_is = this
import index from '@/pages/index/index.vue'
import myDoctor from '@/pages/my-doctor/my-doctor.vue'
import message from '@/pages/message/message.vue'
import prescript from '@/pages/prescript/prescript.vue'
import my from '@/pages/person/person.vue'
export default {
components: {
index,
my,
message,
prescript,
myDoctor
},
data() {
return {
currentIndex: uni.getStorageSync('selectedIndex') || 0,
selectedIndex: uni.getStorageSync('selectedIndex') || 0, // 标记
tabBar: {
list: [{
pagePath: "pages/index/index",
text: "首页",
iconPath: "../../static/images/tabbar/home.png",
selectedIconPath: "../../static/images/tabbar/home1.png"
},
{
pagePath: "pages/my-doctor/my-doctor",
text: "我的医生",
iconPath: "../../static/images/tabbar/doctor.png",
selectedIconPath: "../../static/images/tabbar/doctor1.png"
},
{
pagePath: "pages/message/message",
text: "消息",
iconPath: "../../static/images/tabbar/message.png",
selectedIconPath: "../../static/images/tabbar/message1.png",
hasUnreadMessage: uni.getStorageSync("inline-msg")
},
{
pagePath: "pages/prescript/prescript",
text: "药膳商城",
iconPath: "../../static/images/tabbar/mingyao2.png",
selectedIconPath: "../../static/images/tabbar/mingyao3.png",
selectIconStyle: true
},
{
pagePath: "pages/person/person",
text: "我的",
iconPath: "../../static/images/tabbar/my2=.png",
selectedIconPath: "../../static/images/tabbar/my1.png"
}
]
},
}
},
methods: {
loadsocket() {
if (this.timeout) {
clearTimeout(this.timeout);
}
this.hubConnect = new Hub.HubConnection();
this.hubConnect.token = uni.getStorageSync('WX_TOKEN')
this.hubConnect.start(FILE_URL + "/api/chathub");
this.hubConnect.onOpen = res => {}
this.hubConnect.on("Receive", function(res) {
uni.setStorageSync("inline-msg", true)
console.log("有数据了", res);
})
this.hubConnect.on("UsingCode", res => {})
this.hubConnect.on("UsedCode", res => {})
},
switchTab(item, index) {
this.currentIndex = index;
this.tabBar.list.forEach((v, i) => {
if (item.pagePath === v.pagePath) {
uni.setStorageSync('selectedIndex', index);
}
})
this.selectedIndex = uni.getStorageSync('selectedIndex')
},
},
onShow() {
},
mounted() {
this.loadsocket()
},
}
</script>
这是我做的自定义tabbar，因为需要改样式，所以五个tabbar是一个页面 [图片] 然后ws收到消息后，消息红点不显示，必须刷新一下才显示 [图片] 如果是有消息的话，点击消息，再出来，若是红点存在，他也不会消失，必须刷新一下才消失 [图片] 有人跟我说让我放在data中，我放了，红点出都不出了，我想使用 this.$store 却发现 store并没被挂载，main.js明明是有的 = =!!!! 请问这种情况如何解决，实时红点问题
