原生小程序方法自定义 tabBar | 微信开放文档

如果是uni-app的小程序应该怎么自定义呢？

不是用page.json里面的tabbar就需要修改page.json.加上

"custom": true  注意list数组还是按照正常的来写。所以不使用但是也不能删除。

我们知道uni-app里面的页面都是.vue的。但是这个自定义tabbar不用哦。直接粘贴上面原神的custom-tab-bar放在src的最外层。然后把里面的图片文字改成自己的就行了。

主要是修改index.ts这个文件。list数组里面的内容。

然后需要注意。为了保证每次点击显示的都是对应的页面还要在tabbar的这几个页面再加上。

onShow(()=> {
  const curPages = getCurrentPages()[0];  // 获取当前页面实例
  console.log("curPages",curPages)
  if (typeof curPages.getTabBar === 'function' && curPages.getTabBar()) {
    curPages.getTabBar().setData({
      selected: 0   // selected根据tabbar数组里面的索引值来写的从0开始。每个页面改成自己对应的
    });
  }
})

这个满足遮罩层挡不住tabbar的需求啦。

但是如果你的tabbar图片想要自己设置宽高和位置，或者背景框相加圆角。我们也是可以通过修改样式来实现的。参考这篇的文章。