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 barList" :key="index" @tap="toPath(index,item)">
				<image class="image" src="../../static/logo.png" mode=""></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 {
				active: 0,
				barList: [{
						name: '首页',
						route: 'pages/home/index'
					},
					{
						name: '微店',
						route: 'pages/store/index'
					},
					{
						name: '周边',
						route: 'pages/week/index'
					},
					{
						name: '购物车',
						route: 'pages/market/index'
					},
					{
						name: '我的',
						route: 'pages/my/index'
					},
				]
			};
		},
		created: function() {
			const that = this;
			that.search()
		},
		onShow: function() {},
		methods: {
			search() {
				const that = this;
				let pages = getCurrentPages();
				let currentPage = pages[pages.length - 1];
				let index = that.barList.findIndex((i) => i.route == currentPage.route);
				if (index) that.$set(that, `active`, index);
			},
			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(--footColor);
			display: flex;
			flex-direction: row;
			justify-content: space-around;

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

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

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