最近在做小程序的项目,由于用户需求在进入页面时进行选则角色,然后再进入小程序,这时看到的底部菜单看到的不一样,而我们都知道原生的tabBar是不支持这种做法的。在网上搜集了海量资料后发现无非两种解决方法:1。是建立模板,可是会有不能忍受的抖动;2。是利用小程序的组件开发;但是项目已经进行了一般,不可能再进行大的改变;
怎么办呢?
无意在一条评论中发现说微信官方已经提供该组件,于是在小程序文档中寻找很久才在一个犄角旮旯找到:地址链接,
先看效果图:
这是几个非常重要你需要知道的
在这个例子中有一个微信官方提供的组件:下载地址
组件的目录结构:
自己改造的目录结构如下:
1。首先配置app.json
" tabBar ": {
“自定义”:真的,//这个要有,前面都提到过,注释要删了
“颜色”:“# 7 a7e83”,
“selectedColor”:“# 3 cc51f”,
“边框类型”:“黑人”,
“写成backgroundColor”:“# ffffff”,
“列表”:(
{
:“pagePath页/index1/index1”,
:“iconPath/图像/home.png”,
:“selectedIconPath/图像/home1.png”,
“文本”:“首页1”
}，
{
:“pagePath页/mine1/mine1”,
:“iconPath/图像/user.png”,
:“selectedIconPath/图像/user1.png”,
“文本”:“我的1”
}，
{
:“pagePath页/index2/index2”,
:“iconPath/图像/home.png”,
:“selectedIconPath/图像/home1.png”,
“文本”:“首页2”
}，
{
:“pagePath页/mine2/mine2”,
:“iconPath/图像/user.png”,
:“selectedIconPath/图像/user1.png”,
“文本”:“我的2”
｝
]
},//这个
“usingComponents”: {}
2. app.js
//app.js
应用程序({>
custom-tab-bar/index.js
const应用=getApp ();
组件({
数据:{
选择:0,
颜色:“# 7 a7e83”,
selectedColor:“# ff6700”,
列表:[]//tabBar的数据
}，
寿命:{//组件的生命周期函数
附加(){
this.setData ({
列表:app.globalData.list
}）
}，
}，
方法:{
switchTab (e) {
常量数据=https://www.yisu.com/zixun/e.currentTarget.dataset
const url=data.path
url wx.switchTab ({})
this.setData ({
选择:data.index
}）
｝
｝
})
4。下面就是用了
在首页index.wxml定义了两个按钮
& lt;按钮bindtap=tab1的祝辞进入tab1
& lt;按钮bindtap=' tab2祝辞进入tab2
时间:index.js
tab1:函数(){
app.globalData。列表=[{
:“pagePath/页面/index1/index1”,
:“iconPath/图像/home.png”,
:“selectedIconPath/图像/home1.png”,
“文本”:“首页1”
}，
{
:“pagePath/页面/mine1/mine1”,
:“iconPath/图像/user.png”,
:“selectedIconPath/图像/user1.png”,
“文本”:“我的1”
｝
]
wx.switchTab ({
url:“. ./index1/index1”,
}）
}，
tab2:函数(){
app.globalData。列表=[{
:“pagePath/页面/index2/index2”,
:“iconPath/图像/home.png”,
:“selectedIconPath/图像/home1.png”,
“文本”:“首页2”
}，
{
:“pagePath/页面/mine2/mine2”,
:“iconPath/图像/user.png”,
:“selectedIconPath/图像/user1.png”,
“文本”:“我的2”
｝
]
wx.switchTab ({
url:“. ./index2/index2”,
}）
}
5。在每个tabBar中的昂秀()方法中添加如下:
//添加选中效果
如果(typeof。getTabBar===δ堋?,
this.getTabBar ()) {
this.getTabBar () .setData ({
选择:0//这个数是,tabBar从左到右的下标,从0开始
}）
}
