🥬 🐶的uniapp学习之🦌 【tabBar】
🥬 🐶的uniapp学习之🦌 【tabBar】
用户4793865
发布于 2023-01-12 15:05:02
发布于 2023-01-12 15:05:02
「这是我参与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配置项中注册。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2021-11-01，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
相关产品与服务
云开发 CloudBase
云开发（Tencent CloudBase，TCB）是腾讯云提供的云原生一体化开发环境和工具平台，为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务，可用于云端一体化开发多种端应用（小程序、公众号、Web 应用等），避免了应用开发过程中繁琐的服务器搭建及运维，开发者可以专注于业务逻辑的实现，开发门槛更低，效率更高。