uni-app学习笔记二十七--设置底部菜单TabBar的样式
官方文档地址：uni.setTabBarItem(OBJECT) | uni-app官网
uni.setTabBarItem(OBJECT)
动态设置 tabBar 某一项的内容，通常写在项目的App.vue的onLaunch方法中，用于项目启动时立即执行
重要参数：
| index | number | 是 | tabBar 的哪一项，从左边算起 | ||
| text | String | 否 | tab 上的按钮文字 |
index索引值从0开始，从左到右逐项加1，指向哪个菜单
onLaunch: function() {uni.setTabBarItem({index:1,text:"自定义菜单",})效果展示：
uni.hideTabBar(OBJECT)
隐藏 tabBar，用于隐藏底部菜单栏。
uni.setTabBarBadge(OBJECT)
为 tabBar 某一项的右上角添加文本。
OBJECT参数说明：
| 参数 | 类型 | 必填 | 说明 |
|---|---|---|---|
| index | Number | 是 | tabBar的哪一项，从左边算起 |
| text | String | 是 | 显示的文本，不超过 3 个半角字符 |
uni.removeTabBarBadge(OBJECT)
移除 tabBar 某一项右上角的文本。
uni.showTabBarRedDot(OBJECT)
显示 tabBar 某一项的右上角的红点。
uni.hideTabBarRedDot(OBJECT)
隐藏 tabBar 某一项的右上角的红点。
下面通过代码实现上面TabBar的效果。要求实现：
1.项目启动页面加载时即出现小红点和右上角角标；
2.当用户点击跳转到相应菜单页面时，小红点和右上角角标消失。
为了防止TabBar 页面可能还未挂载，直接调用 setTabBarBadge 或 showTabBarRedDot 出现下面的错误：
UnhandledPromiseRejection: {"errMsg":"showTabBarRedDot:fail not TabBar UnhandledPromiseRejection: {"errMsg":"setTabBarBadge:fail not TabBar page"}
我们可以使用 nextTick 或 setTimeout 延迟调用
在 App.vue 的 onLaunch 里，用 setTimeout 或 uni.nextTick 确保 TabBar 初始化完成后再调用：
setTimeout(() => {uni.setTabBarBadge({index:2,text:"3"})uni.showTabBarRedDot({index:1})},500)然后当用户点击跳转到相应页面时执行onShow生命函数时，调用隐藏的方法，让红点和角标消失：
小红点消失使用：
onShow(()=>{uni.hideTabBarRedDot({index:1})})角标消失使用：
onShow(()=>{uni.removeTabBarBadge({index:2})
})onPullDownRefresh
在 js 中定义 onPullDownRefresh 处理函数（和onLoad等生命周期函数同级），监听该页面用户下拉刷新事件。
- 需要在
pages.json里，找到的当前页面的pages节点，并在style选项中开启enablePullDownRefresh。 - 当处理完数据刷新后，
uni.stopPullDownRefresh可以停止当前页面的下拉刷新。
uni.startPullDownRefresh(OBJECT)
开始下拉刷新，调用后触发下拉刷新动画，效果与用户手动下拉刷新一致。
uni.stopPullDownRefresh()
停止当前页面下拉刷新。