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-if="activeObj.home" v-show="active=='home'" />
		<cinema v-if="activeObj.cinema" v-show="active=='cinema'" />
		<applist v-if="activeObj.applist" v-show="active=='applist'" ref='applist' />
		<user v-if="activeObj.user" v-show="active=='user'" />

		<van-tabbar :active="active" @change="onChange" :placeholder='true' active-color="#E31818" inactive-color="#999999">
			<van-tabbar-item name='home' icon='home-o'>
				<!-- <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='cinema' icon='video-o'>
				<!-- <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' icon='search'>
				<!-- <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' icon='user-o'>
				<!-- <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'
	import cinema from './components/cinema.vue'
	export default {
		components: {
			applist,
			find,
			user,
			topic,
			login,
			home,
			cinema
		},
		data() {
			return {
				login: false,
				active: 'home',
				activeObj: {
					home: true
				},
			}
		},
		onReachBottom() {
			if (this.active == 'applist') {
				this.$refs.applist.onBottom()
			}
		},
		computed: {
			title() {
				if (!this.login) return '登录'
				switch (this.active) {
					case 'home':
						return '首页';
					case 'cinema':
						return '电影';
					case 'applist':
						return '发现';
					case 'user':
						return '我的';
				}
			}
		},
		methods: {
			onChange(event) {
				// event.detail 的值为当前选中项的索引
				this.active = event.detail
				this.activeObj[this.active] = true
			}
		}
	}
</script>

<style lang="scss">

</style>