1.0yangche/pages/packageOne/service/serviceView/serviceView.vue

<template>
	<view class="wrap">
		<view class="content" v-show="showIndex == 0">
			<index></index>
		</view>
		<view class="content" v-show="showIndex == 1">
			<freeEnter></freeEnter>
		</view>
		<view class="content" v-show="showIndex == 2">
			<news></news>
		</view>
		<view class="content" v-show="showIndex == 3">
			<user></user>
		</view>
		<view class="footer">
			<view class="facilitator_tabbar">
			  <view class="facilitator_tabbar_item" 
					v-for="item,index in tabbar"
					:key="index"
					@click="changeIndex(index)">
				  <view class="footer_img"><image :src="index == showIndex?item.select:item.no_select"></image></view>
				  <view class="facilitator_tabbar_item_title">{{item.title}}</view>
			  </view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import api from '../../../../api.js';
	import index from "../index/index.vue";
	import user from "../user/index/index.vue";
	import freeEnter from "@/components/free-enter/free-enter.vue";
	import news from "@/components/news/list/list.vue";
	export default {
		data() {
			return {
				tabbar:[
				      { id: 0,select:'https://wx.fujinyangche.com/nvrnetwork/images/home01.png',no_select:'https://wx.fujinyangche.com/nvrnetwork/images/home.png', tapFunction:'toIndex',title: '首页' },
				      { id: 1,select:'https://wx.fujinyangche.com/nvrnetwork/images/ruzhu01.png', tapFunction: 'toLevel2', title: '免费入驻', no_select: 'https://wx.fujinyangche.com/nvrnetwork/images/ruzhu.png' },
				      { id: 2,select:'https://wx.fujinyangche.com/nvrnetwork/images/news01.png',no_select:'https://wx.fujinyangche.com/nvrnetwork/images/news.png', tapFunction:'toNews',title: '活动资讯' },
				      { id: 3,select:'https://wx.fujinyangche.com/nvrnetwork/images/mine01.png',no_select:'https://wx.fujinyangche.com/nvrnetwork/images/mine.png', tapFunction:'toUser',title: '我' }
				],
				showIndex:0	
			}
		},
		components:{
			index,
			user,
			freeEnter,
			news
		},
		methods: {
			changeIndex(index){
				this.showIndex = index;
			}
		},
		onLoad(options) {
			console.log(options);
			if(options.index !== undefined){
				this.showIndex = options.index;
			}
		}
	}
</script>

<style>
	/* 底部导航栏 */
	.facilitator_tabbar{
	  width:100%;
	  height:100rpx;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 4rpx 8rpx 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  left:0;
	  z-index:200;
	  display: flex;
	  box-sizing: border-box;
	}
	.facilitator_tabbar_item{
	  flex:1;
	  text-align: center;
	  overflow: hidden;
	  color:#222222;
	}
	.footer_img{
	  width:60rpx;
	  height:60rpx;
	  margin:10rpx auto 0;
	}
	.footer_img image{
	  display: block;
	  width:100%;
	  height:100%;
	}
	.facilitator_tabbar_item_title{
	  font-size: 20rpx;
	}
	.active{
	  color:#E77817;
	}
	/*  */
	page{
		width: 100%;
		height: 100%;
	}
	.wrap{
		width: 100%;
		height: 100%;
	}
	.content{
		width: 100%;
		height: 100%;
		/* box-sizing: border-box;
		padding-bottom:50px; */
	}
	.footer{
	  width:375px;
	  height:50px;
	  background:rgba(255,255,255,1);
	  box-shadow:0px 2px 4px 0px rgba(0,0,0,0.5);
	  position: fixed;
	  bottom:0;
	  z-index:1000;
	  box-sizing: border-box;
	}
</style>