NN2022112805/addons/h5/components/tabbar.vue

<template>

	<u-tabbar :value="curIndex" @change="changeMethods" :fixed="true" :activeColor="'#e46008'" :placeholder="false"
		:safeAreaInsetBottom="true">
		<u-tabbar-item v-for="(item,k) in list" :key="k" :text="item.text">
			<image class="u-page__item__slot-icon" slot="active-icon" :src="item.selectedIconPath"></image>
			<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.iconPath"></image>
		</u-tabbar-item>
	</u-tabbar>
	<!-- <view v-for="(item,k) in list" :key="k" class="items" @click="changeMethods(item.pagePath,k)">
			<u-image class="icon" width="56rpx" height="56rpx"
				:src="item.id == index ? item.selectedIconPath :item.iconPath" style="margin: auto;"></u-image>
			<view :class="{'actives':item.id== index}">{{item.text}}</view>
		</view> -->

</template>

<script>
	/* 
	 * 自定义底部导航栏
	 */
	export default {
		name: "tabbar",
		props: {
			index: {
				type: Number,
				default: 1,
			}
		},
		data() {
			return {
				curIndex: this.index - 1,
				list: [{
						pagePath: "/pages/index/index",
						iconPath: "/static/icons/order-home.png",
						selectedIconPath: "/static/icons/order-home-active.png",
						text: '订单广场',
					},
					{
						pagePath: "/pages/order/index",
						iconPath: "/static/icons/order.png",
						selectedIconPath: "/static/icons/order-active.png",
						text: '我的订单',
					},
					{
						pagePath: "/pages/center/index",
						iconPath: "/static/icons/my.png",
						selectedIconPath: "/static/icons/my-active.png",
						text: '我的',
					}
				],
			};
		},
		created() {

		},
		methods: {
			//底部导航选择操作
			changeMethods(index) {
				this.curIndex = index
				let path = typeof(this.list[index]) != 'undefined' ? this.list[index].pagePath : ''
				if (path) {
					uni.reLaunch({
						url: path
					})
				}

			}
		}
	}
</script>

<style lang="scss">
	.u-page__item__slot-icon {
		width: 42rpx;
		height: 42rpx;
	}



	// .tabbar {
	// 	background-color: #32302e;
	// 	color: #FFFFFF;
	// 	padding: 30rpx;
	// 	position: fixed;
	// 	bottom: 0px;
	// 	width: 100%;
	// 	height: 180rpx;
	// 	border-top-left-radius: 22rpx;
	// 	border-top-right-radius: 22rpx;
	// 	text-align: center;
	// 	display: flex;
	// 	z-index: 99;
	// }

	// .u-image {
	// 	height: 44rpx !important;
	// 	width: 44rpx !important;
	// 	margin-bottom: 16rpx !important;
	// }

	// .items {
	// 	width: 33.3%;
	// 	color: #6e6c6b;
	// 	text-align: center;
	// 	// float: left;
	// }

	// .actives {
	// 	color: #bb955e;
	// }
</style>