微信小程序官方动态自定义底部tabBar示例

最近在做小程序的项目中，由于用户的要求，在进入页面时，他们选择角色，然后进入小程序。这时候底部菜单就不一样了，我们都知道原生的tabBar不支持这种做法。在网上收集了海量数据后，发现只有两种解决方案：1。建立模板，但会有无法忍受的抖动；2.使用小程序开发组件；但是项目总体上已经开展，不可能有大的变动；

我该怎么办？

没打算在评论里发现微信正式提供了组件，于是在一个小程序文档里找了很久才在一个角落里找到：地址链接，

先看效果图：

1.先看官方用法

这些是你需要知道的一些非常重要的事情

2.小程序提供了一个例子

在这个例子中，有一个微信官方提供的组件：下载地址

组件的目录结构：

3.也就是说，我们必须根据需要进行改造

自修改目录结构如下：

1.首先配置app.json

Tabbar' : {'Custom' : True，//这是必需的。如上所述，注释应该删除。颜色' :' # 7A7E83 '，'选定颜色' 3360' # 3CC51F '，'边框样式' : '黑色'backgroundColor': '#ffffff '，' list ' :[{ ' page path ' : ' pages/index 1/index 1 '，' iconPath': '/image/home.png '，selectedicon path ' : '/image/home 1 . png '，' text ' : ' page path ' : ' pages/mine 1/mine 1 '，' icon path ' 3: '/image/user . png。

//app . js app({ onlunk : function(){ }，global data : { user info : null，list :[]//存储tabBar的数据}})3。改造组件

custom-tab-bar/index . jsconst app=GetApp()；组件({data: {selected: 0，color:' # 7a7e83 '，selectedcolor3360' # ff6700 '，list 3360[]//tab bar的数据}，lifetimes:的生命周期函数{//组件被附加(){ this . setdata({ list : app . global data . list })})。}，Methods : { switch tab(e){ const data=e . current target . dataset const URL=data . path wx . switch tab({ URL })this . setdata({ selected : data . index })})4。使用了以下内容

主页index.wxml上定义了两个按钮

Button bindtap='tab1 '输入tab 1/button bind tap=' tab 2 '输入tab2/button time: index.js

tab 1: function(){ app . global data . list=[{ ' page path ' : '/pages/index 1/index 1 '，' iconPath': '/image/home.png '，selectedicon path ' : '/image/home 1 . png '，' text' : '第一页1'}，{ ' page path ' : '/pages/mine 1/mine 1 '，' iconpath' :'/image/user.png '，/index1/index1 '，})}，tab 2: function(){ app . globaldata . list=[{ ' page path ' : '/pages/index 2/index 2 '，' iconPath': '/image/home.png '，selectedicon path ' : '/image/home 1 . png '，' text ' 3: '第一页2'}，{ ' page path ' : '/pages/mine 2/mine 2 '，' icon path ' 33: './index2/index2 '，})} 5。将以下内容添加到每个选项卡栏中的onshow()方法中：

//添加所选效果if(类型为this。gettabBar==' function '这个。getta bar()){ this。gettabbar()。setdata({ selected : 0//这个数字是tabbar从左到右的下标，从0开始)}调整基本库版本的另一个地方是

源代码下载地址

摘要

以上是边肖介绍的微信小程序底部tabBar官方动态定制的例子。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！如果你觉得这篇文章对你有帮助，请转载，请注明出处，谢谢！