point-app/components/mobile-frame/index.vue

<template>
	<view class="container body">
		<view class="info">
			<scroll-view scroll-y="true" class="scroll-view">
				<view class="list-scroll-view">
					<slot></slot>
				</view>
			</scroll-view>
		</view>
		<view class="foot" v-if="frameStyle&&frameStyle.useBar||false">
			<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?frameStyle.barActive||'#FB1438':''}">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			frameStyle: {
				type: Object
			}
		},
		data() {
			return {
				list: [],
				active: 0,
			};
		},
		created: function() {
			const that = this;
			that.search()
		},
		methods: {
			search() {
				const that = this;
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];
				uni.getStorage({
					key: 'config',
					success: function(res) {
						if (res.data) {
							let bottom_menu = res.data.bottom_menu;
							let list = bottom_menu.list.sort((a, b) => {
								return a.sort - b.sort
							});
							that.$set(that, `list`, list);
							let data = list.find((i) => i.route == currentPage.route);
							if (data) {
								let index =
									list.findIndex((i) => i.route == currentPage.route);
								that.$set(that, `active`, index);
							}
						}
					},
					fail: function(err) {
						console.log(err);
					}
				})
			},
			toPath(index, item) {
				const that = this;
				that.$set(that, `active`, index);
				that.$emit('toPath', item)
			}
		}
	}
</script>

<style lang="scss">
	.body {
		.info {
			position: relative;
			flex-grow: 1;
		}

		.foot {
			height: 8vh;
			overflow: hidden;
			background-color: var(--fffColor);
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			border-top: 1px solid var(--f1Color);

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

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

				.name {
					font-size: 12px;
				}
			}
		}
	}

	.scroll-view {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;

		.list-scroll-view {
			display: flex;
			flex-direction: column;
		}
	}
</style>