uniapp通过custom-tab-bar 自定义tabbar导航栏(主要用于微信小程序)-Toy模板网

这篇具有很好参考价值的文章主要介绍了uniapp通过custom-tab-bar 自定义tabbar导航栏(主要用于微信小程序)。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

这个自定义的tabbar是用于微信小程序方面的

开始: uniapp文档搜索自定义tabbar,并找到这个

uniapp custom-tab-bar,前端工具函数,uni-app,微信小程序,小程序

第一步: 根目录创建 custom-tab-bar 文件,并在page.json文件里面tabbar设置项中添加 custom 属性,并设置为 true,list数组不要清空,把你得tabbar页面也写上去,他需要和你得自定义得tabbar那个数组对照()

uniapp custom-tab-bar,前端工具函数,uni-app,微信小程序,小程序

第二步: 点击参考微信文档,调整到微信文档,页面滚到最下面找到示例代码,点击预览,这时会打开微信开发者,你把实例代码中custom-tab-bar 文件里面的所有代码复制到你得项目中去

uniapp custom-tab-bar,前端工具函数,uni-app,微信小程序,小程序文章来源地址https://www.toymoban.com/news/detail-845579.html

第三步:根据你自己的想要的tabbar修改你上一步复制的代码,和你(如果你看不懂小程序原生的代码,好,请你自行百度学习)

最后在你的tabbar页面的onshow生命周期加上这段代码vue2使用this. m p , v u e 3 使用 t h i s . mp , vue3使用 this. mp,vue3使用this.scope

onShow() {
			// vue2
			if (typeof this.$mp.page.getTabBar === 'function' && this.$mp.page.getTabBar()) {
				this.$mp.page.getTabBar().setData({
					selected: 0
				})
			}
			// vue3
			if (typeof this.scope.page.getTabBar === 'function' && this.scope.page.getTabBar()) {
				this.scope.page.getTabBar().setData({
					selected: 0
				})
			}
		}