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()

停止当前页面下拉刷新。