「这是我参与11月更文挑战的第2天，活动详情查看：2021最后一次更文挑战」

uniapp中间带加号的底部选项卡

底部选项卡非常常见, 很多小程序和APP底部都多多少少有一个选项卡, 反倒是没有选项卡的不多见. 前两天刚结束一个没有底部选项卡的项目, 项目规模说小不小, 说的大不大的, 页面比较多. 但是这个项目的内容主要从首页点击进去, 首页放不下就点击头像进入到我的页面查看, 这样就不需要底部导航.

但是毕竟不需要底部导航的项目比较少, 并且很多项目会要求在底部导航中间添加一个加号, 可以发布文章或者发布视频(参考抖音底部导航栏加号, 点击就能看到一个大狗头).今天主要写一下uniapp怎么添加底部导航和底部导航中间的加号.

项目添加底部导航(tabBar)

在pages.json中可以设置tabBar, 不仅仅是方便快速开发导航, 更重要的提高性能.

一.注意点

tabBar中的list是一个数组, 数组里最少要有两项,最多五项tab, tab按照数组的顺序排序显示;
当position为top时, 将不会显示图标icon;
tabbar切换第一次加载时可能渲染不及时, 可以在每个tabbar页面的onLoad声明周期里先弹出一个等待雪花;
tabbar的页面展现过一次后就保留在内存中, 再次切换tabbar页面, 只会触发onShow,不会再触发onLoad;

onShow和onLoad两个生命周期函数在初次进入页面都会运行,
非tabbar页面每次点击页面显示, 两个函数同样会运行
tabbar页面渲染后数据就保留在内存中. onLoad不会运行,onShow可以运行, 如果页面需要数据变化, 可以放在onShow页面中每次页面显示变化的时候, 就会运行onShow.

顶部的tabbar目前只仅微信小程序支持;

二.常用的属性

color:tab上的文字默认颜色;
selectedColor: tab上的文字选中时的颜色;
backgroundColor:tab的背景色;
midButton: 中间按钮, 仅在list项为偶数时有效
list:tab列表(list数组中每一项都是一个对象)属性值如下:
- pagePath: 页面路径, 此页面必须存在(即页面路径必须在pages中先定义)
- text: tab上的文字
- iconPath: 图片路径(大小限制40kb, 尺寸建议81px*81px, 不支持网络图片和文字图标, 当position为top时, 此参数无效)
- selectedIconPath: 选中时图片路径(限制条件同上)
- visible: 该项是否显示

"tabBar":{
        "color":"#000000",
        "selectedColor":"#007AFF",
        "borderStyle":"black",
        "backgroundColor":"#FFFFFF",
        "iconWidth":"20px",
        "fontSize":"13px",
        "list":[{
                "pagePath":"pages/index/index",
                "iconPath":"static/logo.png",
                "selectedIconPath":"static/logo.png",
                "text":"首页"
        },{
                "pagePath":"pages/search/search",
                "iconPath":"static/logo.png",
                "selectedIconPath":"static/logo.png",
                "text":"搜索"
        },{
                "pagePath":"pages/activity/activity",
                "iconPath":"static/logo.png",
                "selectedIconPath":"static/logo.png",
                "text":"活动"
        },{
                "pagePath":"pages/center/center",
                "iconPath":"static/logo.png",
                "selectedIconPath":"static/logo.png",
                "text":"我的"
        }]
}

(懒得找图片了, 就全部用logo图)

添加带加号的底部选项卡(midButton)

仅在APP和h5上支持, 小程序等不支持

一.限制条件

仅在开发APP和h5时能使用, 官方不支持微信小程序等使用midButton. (如果有需求有两种解决办法: a.自定义底部导航,b.劝说甲方不要加加号,c.让同事写个自定义组件,d.上网搜组件(我一直选择第二三种));
仅在list项为偶数时使用;

二.midButton属性说明

width: 中间按钮的宽度, tabBar其他项的宽度为减去中间按钮宽度后平分, 默认值为与其它项平分宽度(80px);
height: 中间按钮的高度, 可以大于tabBar高度, 达到中间凸起的效果(下面实例中的图片比例是1:1, 所以高度比较高有凸起的效果. 要注意展示其他页面是中间按钮可能会遮挡到页面);
text: 中间按钮的文字(非必填);
iconPath: 中间按钮的图片路径;
iconWidth: 图片宽度(高度等比例缩放)

三.使用midButton属性构建页面

"midButton":{
    "width": "85px",
    "height": "85px",
    "iconPath": "static/release_a.png",
    "iconWidth": "80px"
}

四.监听中部按钮的点击事件(uni.onTabBarMidButtonTap)

如果想要点击中部按钮跳转新的页面, 可以将跳转写到监听中部按钮的点击事件里

//App.vue
onLaunch: function(){
    uni.onTabBarMidButtonTap((e)=>{
        uni.navigateTo({
            url:'pages/add/add'
        })
    })
}

五.模板

官方推荐的模板,附上链接底部选项卡模板模板好不好用不知道, 反正评论挺搞笑的, 新人上手还是可以看一下