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

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

在这里插入图片描述

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

在这里插入图片描述

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

在这里插入图片描述

第三步:根据你自己的想要的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
				})
			}
		}

如果vue3时setup写法,你需要根据vue2的写法再创建一个script ,在里面的onShow里面写入那段代码

最后感谢这位作者 @景宇 我就是看了他的文章 才知道getTabBar()是如何获取到的

# uni-app # 微信小程序 # 小程序
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue