You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.0 KiB
88 lines
2.0 KiB
<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>
|
|
|