hotelHomestayWx/components/Tabbares/index.vue

<template>
	<view>
		<u-tabbar :value="tabbarValues" @change="name => tabbarValues = name" :fixed="true" :placeholder="true"
			:safeAreaInsetBottom="true" :border="false">
			<u-tabbar-item :text="item.text" v-for="(item,index) in list" :key="index" @click="changeTabbars">
				<image class="u-page__item__slot-icon" slot="active-icon" :src="item.activeImg"></image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.inactiveImg"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	export default {
		props: {
			tabbarid: 0
		},
		data() {
			return {
				tabbarValues: 0,
				list: [{
						activeImg: 'https://i.ringzle.com/file/20240106/57895bbc5414416ea5de2a537ed23dc3.png',
						inactiveImg: 'https://i.ringzle.com/file/20240106/29bd09ef7eb748f1820c335f86f74c61.png',
						text: '首页',
						paths: '/pagesHouse/home/index'
					},
					{
						activeImg: 'https://i.ringzle.com/file/20240106/584d0a4108c44fa5bc566d0d0082e07d.png',
						inactiveImg: 'https://i.ringzle.com/file/20240106/9561cd3843694891998a34ed41be0ec8.png',
						text: '扫码核验',
						paths: '/pagesHouse/Verification/index'
					},
					{
						activeImg: 'https://i.ringzle.com/file/20240106/daf6362d4d6745c29501cf30a4d99bc2.png',
						inactiveImg: 'https://i.ringzle.com/file/20240106/8c1f9fc0b5604ef7b966d98f2ffb1d2e.png',
						text: '我的',
						paths: '/pagesHouse/Mine/index'
					}
				]
			}
		},
		mounted() {
			this.tabbarValues = this.tabbarid;
		},
		methods: {
			changeTabbars(e) {
				console.log(this.list[e].paths, '000');
				this.tabbarValues = e;
				uni.reLaunch({
					url: this.list[e].paths
				})
			}
		}
	}
</script>

<style lang="less">
	/deep/.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
		margin: 8rpx 0 4rpx;
	}
</style>