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>

		<swiper class="swiper-box" :current-item-id="active" @change='swiperChange' easing-function="easeInCubic">
			<swiper-item class="swiper-item" item-id='home'>
				<home v-if="activeObj.home" ref='home' />
			</swiper-item>
			<swiper-item class="swiper-item" item-id='cinema'>
				<cinema v-if="activeObj.cinema" ref='cinema' />
			</swiper-item>
			<swiper-item class="swiper-item" item-id='applist'>
				<applist v-if="activeObj.applist" ref='applist' />
			</swiper-item>
			<swiper-item class="swiper-item" item-id='user'>
				<user v-if="activeObj.user" ref='user' />
			</swiper-item>
		</swiper>

		<!-- <home v-if="activeObj.home" v-show="active=='home'" ref='home' />
		<cinema v-if="activeObj.cinema" v-show="active=='cinema'" ref='cinema'/>
		<applist v-if="activeObj.applist" v-show="active=='applist'" ref='applist' />
		<user v-if="activeObj.user" v-show="active=='user'"  ref='user' /> -->

		<van-tabbar :active="active" @change="onChange" :placeholder='true' active-color="#E31818" inactive-color="#999999">
			<van-tabbar-item name='home' icon='wap-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='cinema' icon='video'>
				<!-- <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='manager'>
				<!-- <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: {},
			}
		},
		onLoad: function(option) {
			if (option.active) {
				this.active = option.active
			}
			this.activeObj[this.active] = true
		},
		onShareAppMessage: function() {},
		onReachBottom() {
			if (this.active == 'home') {
				this.$refs.home.onBottom()
			}
			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
				// wx.startPullDownRefresh()
				// this.$nextTick(function() {
				// 	wx.stopPullDownRefresh()
				// })
			},
			swiperChange(event){
				this.active = event.detail.currentItemId
				this.activeObj[this.active] = true
				// wx.startPullDownRefresh()
				// this.$nextTick(function() {
				// 	wx.stopPullDownRefresh()
				// })
			}
		}
	}
</script>

<style lang="scss">
	.swiper-box {
		height: calc(100vh - 100rpx - env(safe-area-inset-bottom));

		.swiper-item {
			// overflow: auto;
		}
	}
</style>