Vent-App/pages/test1/test1.vue

<template name="home">
	<view>
		    <!-- 其他页面内容 -->
		<view v-if="currentTab === 0">
		     <Firstmodel></Firstmodel>
		</view>
		<scroll-view>
		</scroll-view>
		<view class="cu-tabbar-height margin-top"></view>
	</view>
</template>

<script>
	import Firstmodel from './firstmodel.vue'
	import { us,os } from '@/common/util/work.js'
	import socket from '@/common/js-sdk/socket/socket.js'
	import { mapActions } from "vuex"
	export default {
		components: {
		    Firstmodel,
		},
		name: 'test1',
		watch: {
		},
		data() {
			return {
				usList:us.data,
				osList:os.data,
				msgCount:0,
				dot:{
				  mailHome:false
				},
				currentTab: 0, // 当前选中的选项卡索引
			}
		},
		methods: {
			// 启动webSocket
			onSocketOpen() {
				socket.init('websocket');
			},
			onSocketReceive() {
				var _this=this
				socket.acceptMessage = function(res){
					// console.log("页面收到的消息", res);
					if(res.cmd == "topic"){
					  //系统通知
					  _this.loadCount('1')
					}else if(res.cmd == "user"){
					  //用户消息
					  _this.loadCount('2')
					} else if(res.cmd == 'email'){
					 //邮件消息
					  _this.loadEmailCount()
					}
				}
			},
			switchTab(index) {
			      // 切换选项卡时触发的事件
			      this.currentTab = index;
			}
		},
		onLoad() {
		}
	}
</script>

<style scoped>
	.cu-list.grid>.cu-item {
	  padding: 0px 0px; 
	}
    .line2-icon {
	  width: 60px;
	  height: 60px;
    }
	.tab-bar {
	  display: flex;
	  justify-content: space-around;
	  padding: 10px;
	  background-color: #eee;
	}
	
	.tab-bar view {
	  flex: 1;
	  text-align: center;
	  padding: 10px;
	  border-radius: 5px;
	  cursor: pointer;
	}
	
	.tab-bar view.active {
	  background-color: #007BFF;
	  color: #fff;
	}
	
</style>