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

<template>
	<view class="container body">
		<view class="info">
			<scroll-view class="scroll-view" scroll-with-animation :scroll-into-view="topItem" scroll-y="true"
				@scroll="handleScroll">
				<view class="list-scroll-view" id="top">
					<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="item.normal" mode="" v-if="active!=index"></image>
				<image class="image" :src="item.active" mode="" v-else></image>
				<view class="name" :style="{color:active==index?frameStyle.barActive||'#FB1438':''}">{{item.name}}
				</view>
			</view>
		</view>
		<view class="backTop" v-if="isShow==true">
			<text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			frameStyle: {
				type: Object,
			},
		},
		data() {
			return {
				active: 0,
				barList: [{
						name: '首页',
						route: 'pages/home/index',
						normal: require('@/static/shouye.png'),
						active: require('@/static/shouye_1.png'),
						type: '0'
					},
					{
						name: '微店',
						route: 'pages/store/index',
						normal: require('@/static/store.png'),
						active: require('@/static/store_1.png'),
						type: '0'
					},
					{
						name: '分类',
						route: 'pagesHome/market/type',
						normal: require('@/static/type.png'),
						active: require('@/static/type_1.png'),
						type: '1'
					},
					{
						name: '购物车',
						route: 'pages/market/index',
						normal: require('@/static/market.png'),
						active: require('@/static/market_1.png'),
						type: '0'
					},
					{
						name: '我的',
						route: 'pages/my/index',
						normal: require('@/static/my.png'),
						active: require('@/static/my_1.png'),
						type: '0'
					},
				],
				// 是否显示返回顶部
				isShow: false,
				topItem: '',
			};
		},
		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)
			},
			// 计算高度
			handleScroll(e) {
				const that = this;
				let scrollTop = e.detail.scrollTop;
				that.isShow = scrollTop > 100;
				that.topItem = '';
			},
			// 返回顶部
			backTop() {
				const that = this;
				that.topItem = 'top'
			},
		}
	}
</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;
		}
	}

	.backTop {
		position: fixed;
		bottom: 20vw;
		right: 5vw;

		text {
			font-size: 30px;
			background-color: #0000005f;
			border-radius: 90px;
		}
	}
</style>