point-app/pages/index/index.vue

<template>
	<mobile-frame>
		<view class="main">
			<view class="one">
				<button size="mini" @click="toCommon('pages/login/index')">登录页面</button>
				<button size="mini" @click="toCommon('pages/home/index')">首页</button>
				<button size="mini" @click="toCommon('pages/store/index')">微店</button>
				<button size="mini" @click="toCommon('pages/week/index')">周边</button>
				<button size="mini" @click="toCommon('pages/market/index')">购物车</button>
				<button size="mini" @click="toCommon('pages/my/index')">我的1</button>
			</view>
			<view class="two">
				<tabs :tabs="tabs" @tabsChange="tabsChange">
					<view v-show="tabs.active=='a'">1</view>
					<view v-show="tabs.active=='b'">2</view>
					<view v-show="tabs.active=='c'">3</view>
					<view v-show="tabs.active=='d'">4</view>
					<view v-show="tabs.active=='e'">5</view>
				</tabs>
			</view>
		</view>
	</mobile-frame>
</template>

<script>
	import tabs from '@/components/tabs/index.vue';
	export default {
		components: {
			tabs
		},
		data() {
			return {
				tabs: {
					active: 'a',
					menu: [ //菜单列表
						{
							title: '选项卡一',
							active: 'a'
						},
						{
							title: '选项卡二',
							active: 'b'
						},
						{
							title: '选项卡三',
							active: 'c'
						},
						{
							title: '选项卡四',
							active: 'd'
						},
						{
							title: '选项卡五',
							active: 'e'
						}
					]
				}
			};
		},
		onShow: function() {
			const that = this;
			// 监听用户是否登录
			that.watchLogin();
		},
		methods: {
			// 公共跳转
			toCommon(e) {
				uni.navigateTo({
					url: `/${e}`
				});
			},
			watchLogin() {
				uni.redirectTo({
					url: `/pages/home/index`
				})
			},
			tabsChange(e) {
				const that = this;
				that.$set(that.tabs, `active`, e.active)
			}
		}
	}
</script>

<style lang="scss">
	.main {
		.one {
			text-align: center;

			button {
				margin: 2vw;
			}
		}

		.two {
			padding: 2vw;

			.scrollView {
				display: flex;
				white-space: nowrap;
				text-align: center;
			}

			.list {
				display: inline-block;
				padding: 2vw;
				margin: 0 1.5vw;
				text-align: center;
				border-radius: 5px;

				text {
					font-weight: bold;
					font-size: var(--font14Size);
				}
			}
		}
	}
</style>