Uni-app 页面组件：底部导航栏、返回顶部和四个Tab页

<template>
	<view>
		<tabBar1 v-if="active == 0" :nums="nums" @tabType="tabType" :isGoPage="tabAPage"></tabBar1>
		<tabBar2 v-if="active == 1" :isGoPage="tabBPage"></tabBar2>
		<tabBar3 v-if="active == 2"></tabBar3>
		<tabBar4 v-if="active == 3"></tabBar4>
		<!-- 	<service></service> -->
		<bottomnav ref="bottomnav" :nums="nums" :goSay='goSay' @change="change_page"></bottomnav>
<pre><code>	&lt;backTop :src=&quot;backTop.src&quot; :scrollTop=&quot;backTop.scrollTop&quot;&gt;&lt;/backTop&gt;
&lt;/view&gt;
</code></pre>
</template>
<script>
	import TIM from 'tim-wx-sdk'
	import COS from 'cos-wx-sdk-v5'
	import backTop from '@/components/back-top/back-top.vue';
	import tabBar1 from "@/components/tabbar/tabbar1.vue"
	import tabBar2 from "@/components/tabbar/tabbar2.vue"
	import tabBar3 from "@/components/tabbar/tabbar3.vue"
	import tabBar4 from "@/components/tabbar/tabbar4.vue"
	import service from "@/components/service/index.vue"
	import bottomnav from "@/components/tabbar/bottomnav.vue"
	import config from "@/common/js/config.js"

	export default {
		components: {
			tabBar1,
			tabBar2,
			tabBar3,
			tabBar4,
			bottomnav,
			service,
			backTop
		},
		data() {
			return {
				// 返回顶部
				backTop: {
					src: 'https://pujiang-oss.oss-cn-shenzhen.aliyuncs.com/1bf96bdb-c654-4023-8cb0-3a07fb6b05c7.png',
					scrollTop: 0,
				},
				scrollTop: 0,

				active: 0,
				tabAPage: 1,
				tabBPage: 1,
				user: {},
				goSay: 1,
				invite: '',

				nums: 0,
			}
		},
		onPageScroll(e) {
			this.backTop.scrollTop = e.scrollTop;
		},
		onLoad(option) {
			
			this.invite = option.scene
			if (this.invite) {
				uni.setStorage({
					key: "invite",
					data: this.invite
				})
			}
			if (option.active) {
				this.active = option.active;
				if (option.active == 2) {
					this.goSay = 2
				}
			}
			// 建立连接
			let token = uni.getStorageSync('token');
			if (token) {
				this.nums = 0
				// this.conIM()
				this.initIm()
			}
		},
		watch: {
			active: {
				handler: function(newVal, oldVal) {
					if (newVal != 2) {
						// this.getMsg()
						this.getList()
					} else {
						this.nums = 0
					}
				}
			}
		},
		
		
		methods: {
			async initIm() {
				let that = this
				let userID = ''
				let res = await this.$api.myUserInfo()
				if (res.code == 1) {
					userID = res.data.id.toString()
				}
				let sign = await this.$api.getUserSig()
				let userSig = sign.data.userSig
				let promise = this.$tim.login({
					userID,
					userSig
				});
				promise.then(function(imResponse) {
					//console.log('------登录成功', imResponse); // 登录成功
					that.im_on() // 监听
				}).catch(function(imError) {
					//console.warn('------login error:', imError); // 登录失败的相关信息
				});
			},
			im_on() {
				let that = this
				console.log('监听IM-------------------------')
				// 监听事件，例如：
				this.$tim.on(TIM.EVENT.SDK_READY, function(event) {
					console.log('收到离线消息和会话列表同步完毕通知，接入侧可以调用')
					that.getList() //回话列表
				});

				this.$tim.on(TIM.EVENT.MESSAGE_RECEIVED, function(event) {
					console.log('.----------收到推送的单聊、群聊、群提示、群系统通知的新消息', event.data)
					that.nums = 1
				});

				this.$tim.on(TIM.EVENT.MESSAGE_READ_BY_PEER, function(event) {
					// 已读消息
					// event.data - 存储 Message 对象的数组 - [Message] - 每个 Message 对象的 isPeerRead 属性值为 true
					// console.log(event.data)
					that.getList()
				});
				
				// SDK 遇到错误时触发
				this.$tim.on(TIM.EVENT.ERROR, function(event) {
					that.$utils.toast(event.data.message)
				});
			},
			
			getList(){
				let that = this
				this.$tim.getConversationList().then(function(imResponse) {
					const conversationList = imResponse.data.conversationList; // 会话列表，用该列表覆盖原有的会话列表
					conversationList.forEach(el=>{
						if(el.unreadCount>0){
							that.nums = 1
						}
					})
					that.sysMsgs()
				}).catch(function(imError) {
					console.warn('getConversationList error:', imError); // 获取会话列表失败的相关信息
				});
			},
			// 系统消息未读
			sysMsgs(){
				let newNum = 0
				this.$api.sysMsg({page: 1,limit: 20}).then(res => {
					if (res.data.length > 0) {
						res.data.forEach(el => {
							if (el.type == 0) {
								newNum++
							}
						})
					}
					this.nums = this.nums+newNum
				})
			},
			onshow(){
				//enterTime = new Date();
			},
			tabType(res) {
				console.log(res)
				if (res) {
					this.active = 1;
					this.goSay++;
				}
			},
			change_page(e) {
				this.active = e
			}
		},
		onReachBottom() {
			if (this.active == 0) {
				this.tabAPage++;
			}
			if (this.active == 1) {
				this.tabBPage++;
			}
		},
		onShareAppMessage() {},
		onShareTimeline() {
			return {
				title: '小浦评楼-教你挑好房 帮你找优惠',
			}
		}
	}
</script>
<style lang="scss">
	page {
		padding-bottom: 150rpx;
	}
</style>
<p>这是一个使用uni-app框架开发的页面组件，包含了底部导航栏、返回顶部组件以及四个Tab页，分别为tabBar1、tabBar2、tabBar3和tabBar4。其中，tabBar1和tabBar2传递了props参数，用于控制页面跳转和数据展示，tabBar3和tabBar4没有传递props，因为它们的功能较为简单，只需要展示静态内容即可。</p>
<p>在页面加载时，会根据传递的参数来判断当前应该显示哪个Tab页，并且根据用户登录状态来判断是否需要建立即时通讯连接。在Tab页切换时，会根据不同的Tab页来进行不同的数据请求和处理，同时会在底部导航栏上显示未读消息数量。</p>
<p>页面底部还包括了一个返回顶部组件，当页面滚动时会动态更新其位置，方便用户快速返回页面顶部。</p>