开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 19 天，点击查看活动详情 响应式数据的基本实现
uview中的tabbar
uview中tabbar文档也是醉了。没办法没得其他好用的UI库，自己开发成本高。将就用吧。
自定义tabbar自然是不用原来的tabbar，但是自定义说到底就是画了一个tabar的UI，tabbar的切换方法还是调不了。所以在pages.json中还是得配置tabbar的，这就造成了两个tabar显示在界面上，所以我们需要隐藏原来的tabar，用的只是uni.switchTab方法。
既然只是一个画的一个tabbar的view 那么怎么实现tab的效果呢。
有两种。一种
大致
- v-if
- 将tabbar的自定义view提成组件，每个tab中都引入tabbar组件。相当于在多个tab页面画了多份tabbar。
实现
第二种
// pages.json
"tabBar": {
"list": [
{"pagePath": "pages/tabBar/home/home"},
{"pagePath": "pages/tabBar/second/second"},
{"pagePath": "pages/tabBar/third/third"},
{"pagePath": "pages/tabBar/fourth/fourth"},
{"pagePath": "pages/tabBar/myself/myself"},
]
},
//组件 f-tabbar.vue
<template>
<view>
<view :class="[isFixed?'f-fixed':'']">
<u-tabbar
:value="activeTabBar"
@change="onTabbar"
:fixed="false"
:placeholder="false"
:activeColor="activeColor || PrimaryColor"
:inactiveColor="inactiveColor"
>
<block v-for="(item,index) in list" :key="index">
<!-- 自定义icon -->
<u-tabbar-item :text="item.name" :badge="item.badge" :dot="item.dot" :badgeStyle="item.badgeStyle">
<view slot="active-icon">
<!-- <view class="custom-icon" :class="['custom-icon-'+item.iconFill]" style="font-size: 20px;" :style="{color:activeColor || PrimaryColor}"></view> -->
<!-- 自定义图标 -->
<!-- <f-icon :name="item.iconFill" size="40" :color="activeColor || PrimaryColor"></f-icon> -->
<!-- 图片路径 -->
<image class="icon" :src="item.iconFill"></image>
</view>
<view slot="inactive-icon">
<view class="custom-icon" :class="['custom-icon-'+item.icon]" style="font-size: 20px;" :style="{color:inactiveColor}"></view>
<!-- 自定义图标 -->
<!-- <f-icon :name="item.icon" size="40" :color="inactiveColor"></f-icon> -->
<!-- 图片路径 -->
<image class="icon" :src="item.icon"></image>
</view>
</u-tabbar-item>
</block>
</u-tabbar>
<!-- 苹果安全距离-默认20px -->
<view :style="{paddingBottom:systemInfo.tabbarPaddingB+'px',background:'#fff'}"></view>
</view>
<!-- 防止塌陷高度 -->
<view v-if="isFixed && isFillHeight" :style="{height:systemInfo.tabbarH+'px'}"></view>
<!-- #ifdef H5 -->
<u-safe-bottom></u-safe-bottom>
<!-- #endif -->
</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import base from '../../utils/systemInfo.js';
export default {
name: 'q-tabbar',
props:{
// 是否固定在底部
isFixed:{
type:Boolean,
default:true,
},
// 是否设置防止塌陷高度
isFillHeight:{
type:Boolean,
default:true,
},
// 选中的颜色--为空显示主题色
activeColor:{
type:String,
default:'#08439A',
},
// 未选中颜色
inactiveColor:{
type:String,
default:'#C1C9D4',
},
// 控制徽标的位置，对象或者字符串形式，可以设置top和right属性
badgeStyle: {
type: [Object, String],
default: uni.$u.props.tabbarItem.badgeStyle
}
},
computed:{
...mapState(['PrimaryColor']),
},
data(){
return {
safeAreaInsetBottom:false,
systemInfo:base.systemInfo,
activeTabBar:this.activeTabBar,
path:'', //当前路径
list:[{
name: '首页',
url: 'pages/tabBar/home/home',
icon: 'home',
iconFill: 'home-filling'
},
{
name: '消息',
url: 'pages/tabBar/second/second',
icon: 'second',
iconFill: 'second-filling',
badge: 16
},
{
name: '购物车',
url: 'pages/tabBar/third/third',
icon: 'third',
iconFill: 'third-filling',
badge: 16
},
{
name: '交易',
url: 'pages/tabBar/fourth/fourth',
icon: 'fourth',
iconFill: 'fourth-filling',
badge: 16
},
{
name: '我的',
url: 'pages/tabBar/myself/myself',
icon: 'my',
iconFill: 'my-filling',
dot: true
}]
}
},
created() {
//获取页面路径
let currentPages = getCurrentPages();
let page = currentPages[currentPages.length - 1];
this.path = page.route;
//获取页面路径
this.list.forEach((item,index)=>{
if(this.path == item.url){
this.activeTabBar = index
}
})
// #ifdef H5
this.safeAreaInsetBottom = true
// #endif
},
methods:{
onTabbar(index){
console.log(this.list[index].url)
if (this.path !== this.list[index].url) {
uni.switchTab({
url: '/' + this.list[index].url
});
}
}
}
}
</script>
<style lang="scss" scoped>
.f-fixed{
position: fixed;
bottom: 0;
left: 0;
right: 0;
z-index: 1000;
.icon{
width: 20px;
height: 20px;
}
}
</style>
//home.vue
<templete>
<f-tabbar></f-tabbar>
</templete>
//second.vue
<templete>
<f-tabbar></f-tabbar>
</templete>
//third.vue ......
最后隐藏原生的tabbar
//app.vue
<script>
export default {
onLaunch: function() {
console.log('App Launch')
},
onShow: function() {
uni.hideTabBar({})
},
onHide: function() {
console.log('App Hide')
}
}
</script>
方法一
<templete>
<view v-if="value2 === '首页'">
</view>
<view v-if="value2 === '放映厅'">
</view>
<view v-if="value2 === '直播'">
</view>
<view v-if="value2 === '我的'">
</view>
<u-tabbar
:value="value2"
:placeholder="false"
@change="name => value2 = name"
:fixed="false"
:safeAreaInsetBottom="false"
>
<u-tabbar-item text="首页" icon="home" dot ></u-tabbar-item>
<u-tabbar-item text="放映厅" icon="photo" badge="3"></u-tabbar-item>
<u-tabbar-item text="直播" icon="play-right" ></u-tabbar-item>
<u-tabbar-item text="我的" icon="account" ></u-tabbar-item>
</u-tabbar>
</templete>
开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 19 天，点击查看活动详情 响应式数据的基本实现
