jpcj-xcx/pages/index/index.vue

<template>
	<page-meta>
		<navigation-bar :title="title" background-color="#FFFFFF" front-color="#000000" />
	</page-meta>
	<view v-if="!login">
		<login :login.sync='login' />
	</view>
	<view v-else>
		<!-- <home v-show="active=='home'" /> -->
		<applist v-show="active=='applist'" ref='applist' />
		<user v-show="active=='user'" />
		<van-tabbar :active="active" @change="onChange" :placeholder='true' active-color="#0F0404" inactive-color="#999999">
			<!-- <van-tabbar-item name='home'>
				<van-icon slot="icon" name="/static/imgs/fxh.png" />
				<van-icon slot="icon-active" name="/static/imgs/fx.png" />
				首页
			</van-tabbar-item> -->
			<van-tabbar-item name='applist'>
				<van-icon slot="icon" name="/static/imgs/zth.png" />
				<van-icon slot="icon-active" name="/static/imgs/zt.png" />
				发现
			</van-tabbar-item>
			<van-tabbar-item name='user'>
				<van-icon slot="icon" name="/static/imgs/wdh.png" />
				<van-icon slot="icon-active" name="/static/imgs/wd.png" />
				我的
			</van-tabbar-item>
		</van-tabbar>
	</view>


	<van-toast id="van-toast" />
</template>

<script>
	import applist from './components/applist.vue'
	import find from './components/find/index.vue'
	import user from './components/user.vue'
	import topic from './components/topic/index.vue'
	import login from './components/login.vue'
	import home from './components/home.vue'
	export default {
		components: {
			applist,
			find,
			user,
			topic,
			login,
			home
		},
		data() {
			return {
				login: false,
				active: 'applist',
			}
		},
		onReachBottom() {
			if (this.active == 'applist') {
				this.$refs.applist.onBottom()
			}
		},
		computed: {
			title() {
				if (!this.login) return '登录'
				switch (this.active) {
					case 'home':
						return '首页';
					case 'applist':
						return '发现';
					case 'user':
						return '我的';
				}
			}
		},
		methods: {
			onChange(event) {
				// event.detail 的值为当前选中项的索引
				this.active = event.detail
			}
		}
	}
</script>

<style lang="scss">

</style>