xiaochengxu/pages/main/main.vue

<template>
	<view class="main_background">
		<!--背景色-->
		<view style="background-color: #F6F6F6;position: fixed;top: 0;bottom: 0;right: 0;left: 0;z-index: -1;"></view>
		<MainPage v-if="bottom_selected_index == 0"/>
		<KeHu v-if="bottom_selected_index == 1"/>
		<Mine v-if="bottom_selected_index == 3" ref='Mine'/>
		<u-tabbar :value="bottom_selected_index"
			@change="onBottomClicked"
			:border="true"
			:fixed="true"
			:placeholder="true"
			customStyle="background-color: #FFFFFF;border-radius: 10rpx 10rpx 0 0;height=130rpx;"
		>
			<u-tabbar-item v-for="(item,index) in main_bottom_tabbar_defines" :key="item.index"
				:name="index"
				:text="item.title"
			>
				<image
					slot="active-icon"
					:src="item.img1"
					class="tabbar_icon"
				></image>
				<image
					slot="inactive-icon"
					:src="item.img2"
					class="tabbar_icon"
				></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>	
	import datas from "./main.config.js"
	import MainPage from "@/components/MainPage/MainPage.vue"
	import KeHu from "@/components/KeHu/KeHu.vue"
	import Mine from "@/components/Mine/Mine.vue"
	///下方导航栏配置
	var main_bottom_tabbar_defines = datas['main_bottom_tabbar_defines'];
	export default {
		mixins: [uni.$u.mixin],
		onLoad() {
			console.log("MainPage onLoad!");
		},
		///注册组件
		components:{
			MainPage,
			KeHu,
			Mine,
		},
		data() {
			return {
				///下方菜单选中了哪一个
				bottom_selected_index:0,
				main_bottom_tabbar_defines,
			}
		},
		methods: {
			onBottomClicked(name){
				this.bottom_selected_index = name;
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main_background{
			opacity: 1;
			border-radius: 0px;
			overflow: scroll;
			touch-action: auto;
			flex-direction: column;
			display: flex;
			margin: 0 auto;
			left: 0;
			top: 0;
			bottom: 0;
			right: 0;
			position: relative;
			height: 100%;
			//background-color: #1CBBB4;
		}
	.tabbar_icon{
		width: 52rpx;
		height: 52rpx;
	}
</style>