TabBar就是移动端软件下面的类似选项卡的东西。
一、添加Tabbar
1、在pages.json中添加如下代码
"tabBar": {
"color": "#7A7E83",
"selectedColor": "#3cc51f",
"borderStyle": "black",
"backgroundColor": "#ffffff",
"height": "50px",
"fontSize": "10px",
"iconWidth": "24px",
"spacing": "3px",
"list": [{
"pagePath": "pages/home/homeList", //界面路径
"iconPath": "static/image/机具.png", //默认图标
"selectedIconPath": "static/image/公益.png", //选中后的图标
"text": "主页" //标题
},{
"pagePath": "pages/index/index",
"iconPath": "static/image/首页.png",
"selectedIconPath": "static/image/三人.png",
"text": "首页"
}, {
"pagePath": "pages/my/myList",
"iconPath": "static/image/爱心.png",
"selectedIconPath": "static/image/彩蛋.png",
"text": "个人中心"
}]
}
就可以达到最上面展示的效果,切换不同的Tabbar,可以直接跳转到不同的界面。
如果使用其他方式切换Tabbar,则需要
uni.switchTab({
url: '/pages/my/myList'
});
地址需要在pages.json中配置。
二、动态添加Tabbar
研究中。。。。。。