hwnc/components/tabbar/tabbar.vue

<template>
	<view :class="[AppTheme]" class="tabbar" :style="{'padding-bottom':BottomBlackLineHeight+'rpx'}">
		<view class="tabbar-item" v-for="(item,index) in tabbars" :key="index" @click="goswurl(item,index)">
			<u-icon labelSize="12" :color="currentPage===item.url?primary2:'#82848a'" :label="item.title"
				labelPos="bottom" :labelColor="currentPage===item.url?primary2:'#82848a'" size="24"
				:name="currentPage===item.url?item.img:item.pic"></u-icon>
		</view>
	</view>
</template>
<script>
	import homeApi from '@/api/home/index.js';
	export default {
		props: ["primary"],
		data() {
			return {
				settingFile: this.$siteinfo,
				onetabbars: [
					'/pages/index/index',
					'/pages/index/adoplist/adoplist',
					'/pages/mall/mall',
					'/pages/land/land',
					'/pages/user/user'
				],
				tabbars: [{
						img: "home",
						pic: "home-fill",
						title: "首页",
						url: "/pages/index/index",
					},
					{
						img: "account",
						pic: "account-fill",
						title: "我的",
						url: "/pages/user/user",
					}
				],
				active: 0,
				currentPage: '',
				primary2: "#56AB2F",
				BottomBlackLineHeight: 10, //iphoneX底部一条黑线，有些页面要避开
			};
		},
		methods: {
			getMobileInfo() {
				let that = this
				const mobileInfo = uni.getSystemInfoSync();
				let iphoneXArr = ["iPhone X", "iPhone 11", "iPhone 11 Pro Max"];
				iphoneXArr.forEach(function(item) {
					if (mobileInfo.model.search(item) !== -1) {
						that.BottomBlackLineHeight = 40;
						return
					}
				});
			},
			goswurl(item, swindex) {
				let that = this
				that.$until.toUrl(item.url);
			},
		},
		created() {
			let that = this
			if (that.primary != '#ffffff') {
				that.primary2 = that.primary
			}
			uni.hideTabBar({}) //隐藏系统默认tabbar
			that.getMobileInfo();
			let tlist = uni.getStorageSync("tabbar")
			let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面
			let page = pages[pages.length - 1];
			that.currentPage = '/' + page.route; // 当前的页面路由（小程序可以，H5也可以）
			/* 初次进入获取tabbar列表 */
			if (tlist && tlist.length > 0) {
				that.tabbars = tlist
			} else {
				homeApi.tabbar().then(res => {
					if (res.data.tarbar && res.data.tarbar.length > 0) {
						that.tabbars = res.data.tarbar;
						uni.setStorageSync('tabbar', res.data.tarbar)
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
	}

	.tabbar {
		height: 100rpx;
		width: 100vw;
		padding-top: 10rpx;
		background-color: #fff;
		border: 1px solid #f2f2f2;
		position: fixed;
		bottom: 0;
		z-index: 999;
		display: flex;
		text-align: center;
		align-items: center;

		.tabbar-item {
			flex: 1;
			font-size: 23rpx;

			.item-img {
				width: 50rpx;
				height: 50rpx;
				display: inline-block;
				margin-bottom: 10rpx;

				.image {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
</style>