「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战」
这是官网描述的：✈️
- 当设置 position 为 top 时，将不会显示 icon
- tabBar 中的 list 是一个数组，只能配置最少2个、最多5个 tab，tab 按数组的顺序排序。
- tabbar 切换第一次加载时可能渲染不及时，可以在每个tabbar页面的onLoad生命周期里先弹出一个等待雪花（hello uni-app使用了此方式）
- tabbar 的页面展现过一次后就保留在内存中，再次切换 tabbar 页面，只会触发每个页面的onShow，不会再触发onLoad。
- 顶部的 tabbar 目前仅微信小程序上支持。需要用到顶部选项卡的话，建议不使用 tabbar 的顶部设置，而是自己做顶部选项卡，可参考 hello uni-app->模板->顶部选项卡。
fontSize
修改字体大小
list
其中list是一个数组，数组中又是对象，对象的iconPath属性对应着我们要使用图标的路径。并且对这个图片有如下要求：icon 大小限制为40kb，建议尺寸为 81px * 81px，当 position 为 top 时，此参数无效，不支持网络图片，不支持字体图标
midButton
-
这个属性是中间的凸出按钮，因为上面提到过tabBar最少配置两个、最多五个。
-
我们把midButton配置项加到了list后面，它们两个是同级的。
-
当list(list中不需要把midButton的内容再写一遍)中有2或4项的时候(加上midButton是奇数项)的时候，这个中间按钮就会被加到中间。否则不显示。
-
tabBar是有默认高度的，我们最好还是给它定义高度，如果想要让midbutton凸出，那就需要midbutton的高度高于tabBar的高度。同时图标大小iconWidth也要大一些
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#007AFF",
"borderStyle": "#f7fcfe",
"spacing":"1px",
"position":"bottom",
"backgroundColor": "#f7fcfe",
// "fontSize": "15px",
"list": [{
"pagePath": "pages/tabBar/Home/Home",
// "iconPath": "static/component.png",
// "selectedIconPath": "static/componentHL.png",
"text": "首页"
},
{
"pagePath": "pages/tabBar/component/component",
"iconPath": "static/component.png",
"selectedIconPath": "static/componentHL.png",
"text": "内置组件"
},
{
"pagePath": "pages/tabBar/extUI/extUI",
"iconPath": "static/extui.png",
"selectedIconPath": "static/extuiHL.png",
"text": "扩展组件"
}, {
"pagePath": "pages/tabBar/template/template",
"iconPath": "static/template.png",
"selectedIconPath": "static/templateHL.png",
"text": "模板"
}
],
"midButton": {
"pagePath": "pages/tabBar/API/API",
"iconPath": "static/icon/record.png",
"width": "70px",
"height": "69px",
"iconWidth": "50px",
"text": "发布"
}
}
图片可以去iconfont中下载✈️ [📢]图片大小最好80*80 并且不大于40kb
看一下效果
如果不需要图标，去掉此配置项即可。
midButton跳转
App.vue文件夹中加入监听事件
- 其中onLaunch是初始化的生命周期、
- uni.onTabBarMidButtonTap是MidButton的的监听事件。
- uni.navigateTo是路由跳转（注意路由最前面一定要用 / ）
- onShow是进入前端时的生命周期
- onHide是从前端进入后端的生命周期
<script>
export default {
// 初始化生命周期
onLaunch: function() {
// 监听事件
uni.onTabBarMidButtonTap(() => {
// 注意路由带 /
uni.navigateTo({
url: '/pages/publish/publish',
});
})
},
onShow: function() {
console.log('App Show')
},
onHide: function() {
console.log('App Hide')
}
}
</script>
现在点击按钮就会跳转。这个跳转的路由对应的页面一定要在pages.json中的page配置项中注册。
