<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明明是有的 = =!!!! 请问这种情况如何解决，实时红点问题