收藏
回答

关于自定义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明明是有的 = =!!!!


请问这种情况如何解决,实时红点问题

回答关注问题邀请回答
收藏

1 个回答

登录 后发表内容