uniapp/pagesHome/components/home-frame.vue

<template>
	<view class="content">
		<view class="info">
			<slot></slot>
		</view>
		<view class="foot">
			<view class="list" v-for="(item,index) in list" :key="index" @tap="toPath(index,item)"
				v-if="item.is_use=='0'">
				<image class="image" :src="item.normal.length>0?item.normal[0].url:''" mode="" v-if="active!=index">
				</image>
				<image class="image" :src="item.active.length>0?item.active[0].url:''" mode="" v-else></image>
				<view class="name" :style="{color:active==index?'var(--rgbfa4)':''}">{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {

		},
		data() {
			return {
				// 平台信息
				basicInfo: {},
				// 底部菜单
				active: 0,
				list: []
			}
		},
		onLoad() {},
		onShow() {},
		created() {
			const that = this;
			that.search()
		},
		methods: {
			search() {
				const that = this;
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];
				uni.getStorage({
					key: 'basicInfo',
					success: (res) => {
						let data = res.data
						that.$set(that, `basicInfo`, data);
						// 底部菜单
						let foot_menus = data.foot_menus;
						let list = foot_menus.sort((a, b) => {
							return a.sort - b.sort
						});
						that.$set(that, `list`, list);
						let routeInfo = list.find((i) => i.route == currentPage.route);
						if (routeInfo) {
							let index = list.findIndex((i) => i.route == currentPage.route);
							that.$set(that, `active`, index);
						}

					}
				})
			},
			toPath(index, e) {
				const that = this;
				that.$set(that, `active`, index);
				that.$emit('toPath', e)
			}
		}
	}
</script>

<style lang="scss">
	.content {
		.info {
			width: 100vw;
			height: 92vh;
			overflow: auto;
		}

		.foot {
			position: absolute;
			bottom: 0;
			width: 100vw;
			height: 8vh;
			overflow: hidden;
			background-color: var(--rgb161);
			color: var(--rgbfff);
			display: flex;
			flex-direction: row;
			justify-content: space-around;

			.list {
				padding: 1vw 0;
				text-align: center;

				.image {
					width: 7vw;
					height: 6vw;
				}

				.name {
					font-size: 12px;
				}
			}
		}
	}
</style>