<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>