point-app/pagesHome/farming/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<view class="one_1" v-if="barActive=='0'">
					微店首页
				</view>
				<view class="one_2" v-else-if="barActive=='1'">
					商品分类
				</view>
				<view class="one_3" v-else-if="barActive=='2'">
					全部商品
				</view>
				<view class="one_4" v-else-if="barActive=='3'">
					店铺简介
				</view>
			</view>
			<view class="two">
				<view class="list" v-for="(item,index) in barList" :key="index" @tap="barChange(index,item)">
					<view class="icon">
						<text :class="['iconfont',barActive==index?item.acticon:item.icon]"></text>
					</view>
					<view :class="['name',barActive==index?'activename':'']">
						{{item.name}}
					</view>
				</view>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	export default {
		data() {
			return {
				barActive: '0',
				barList: [ //底部菜单
					{
						icon: 'icon-shangdian',
						acticon: "icon-shangdian-copy",
						name: '微店首页'
					}, {
						icon: 'icon-fenlei',
						acticon: "icon-fenlei-copy",
						name: '商品分类'
					}, {
						icon: 'icon-shangpinfenlei',
						acticon: "icon-shangpinfenlei-copy",
						name: '全部商品'
					}, {
						icon: 'icon-qiyejianjie',
						acticon: "icon-qiyejianjie-copy",
						name: '店铺简介'
					}
				]
			};
		},
		onShow: function() {},
		methods: {
			// 选择底部菜单
			barChange(index, item) {
				const that = this;
				that.$set(that, `barActive`, index);
			}
		}
	}
</script>

<style lang="scss">
	.main {
		display: flex;
		flex-direction: column;
		width: 100vw;
		height: 100vh;

		.one {
			position: relative;
			flex-grow: 1;
		}

		.two {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			border-top: 1px solid #f1f1f1;

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

				.icon {}

				.name {
					font-size: 12px;
				}

				.activename {
					color: var(--fFB1Color);
				}
			}
		}
	}
</style>