微信小程序TabBar的使用
2024-08-24 11:54:03
一、TabBar使用步骤
1.创建所需要的界面和所需要的图片:
2.配置文件:
我们找到项目根目录中的配置文件 app.json 加入如下配置信息
"tabBar": {
"color": "#a9b7b7",
"selectedColor": "#11cd6e",
"borderStyle": "white",
"list": [
{
"selectedIconPath": "image/tab_home_select.png",
"iconPath": "image/tab_home.png",
"pagePath": "pages/home/home",
"text": "首页"
},
{
"selectedIconPath": "image/tab_msg_select.png",
"iconPath": "image/tab_msg.png",
"pagePath": "pages/message/message",
"text": "消息"
},
{
"selectedIconPath": "image/tab_me_select.png",
"iconPath": "image/tab_me.png",
"pagePath": "pages/my/my",
"text": "我的"
}
]
}
属性的解释
tabBar 指底部的 导航配置属性
color 未选择时 底部导航文字的颜色
selectedColor 选择时 底部导航文字的颜色
borderStyle 底部导航边框的样色(注意 这里如果没有写入样式 会导致 导航框上边框会出现默认的浅灰色线条)
list 导航配置数组
selectedIconPath 选中时 图标路径
iconPath 未选择时 图标路径
pagePath 页面访问地址
text 导航图标下方文字
二、不同界面的跳转:
页面要返回/跳转至tabbar的某一页面,可用:
wx.switchTab({
url: '../b/b'
});
注意switchTab只能跳转到带有tab的页面,不能跳转到不带tab的页面
跳转不带tab的页面还是用redirectTo或者navigateTo
故如果post页面没有加入tab选项卡,依然使用redirectTo或者navigateTo进行跳转
wx.navigateTo({
url: '../b/b'
});
wx.redirectTo({
url: '../b/b'
});
最新文章
- 转:ORA-15186: ASMLIB error function = [asm_open], error = [1], 2009-05-24 13:57:38
- 关于Oracle出现listener refused the connection with the ORA-12505错误,解决方案
- AngularJS四大特性
- python为什么有私有方法和变量
- 去除字符串中空格的方法(2016.1.12P141-2)
- 单选按钮控件(Ridio Button)的使用
- [LeetCode]题解(python):083 - Remove Duplicates from Sorted List
- ubuntu- eclipse、CDT安装
- Java 类型信息
- eclipse集承jboss服务器
- bugumongo--ConnectToMongoDB
- NHIBERNATE之映射文件配置说明(转载4)
- Windows SQL Server 2012 R2 安装Intel I217-V/I218-V网卡驱动(转)
- CNZZ公告:近期无法获取百度关键词
- C# Json反序列化
- HTML基础【4】:表格标签
- Using C++ new() placement in embedded system
- 消息监听器无法注入bean
- 开源 JSON 库解析性能对比( Jackson / Json.simple / Gson )
- c# comboBox输出图文效果