微信小程序开发之tabbar图标和颜色的实现
作者:国苏 时间:2024-06-20 01:43:02
前期准备 :注册,填材料,验证等等:https://mp.weixin.qq.com
1.浏览一遍简易教程,下载相应的开发工具
写一个小例子
点击左侧的 “编辑”-》点击右侧代码里的 app.json 修改为
{
"pages":[
"pages/fightings/home",
"pages/publish/home",
"pages/mine/home"
],
"tabBar": {
"list": [
{
"pagePath": "pages/fightings/home",
"text": "挑战"
},
{
"pagePath": "pages/publish/home",
"text": "发布"
},
{
"pagePath": "pages/mine/home",
"text": "我"
}
]
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "i挑战",
"navigationBarTextStyle":"black"
}
}
说明
pages就是我们有多少个页面
tabbar是页面底部的tab
window是页面的一些属性
这个样子太丑了 我们先来美化一下这个tab
{
"pages":[
"pages/home/home",
"pages/fightings/home",
"pages/mine/home"
],
"tabBar": {
"color":"#666666",
"selectedColor":"#f10b2e",
"list": [
{
"pagePath": "pages/home/home",
"text": "大厅",
"iconPath": "./res/icon_tab_home.png",
"selectedIconPath": "./res/icon_tab_home_hl.png"
},
{
"pagePath": "pages/fightings/home",
"text": "挑战",
"iconPath":"./res/icon_tab_fighting.png",
"selectedIconPath":"./res/icon_tab_fighting_hl.png"
},
{
"pagePath": "pages/mine/home",
"text": "我",
"iconPath": "./res/icon_tab_me.png",
"selectedIconPath": "./res/icon_tab_me_hl.png"
}
]
},
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "i挑战",
"navigationBarTextStyle":"black"
}
}
说明
字段都比较简单就不详细说了 其中 “iconPath”: “./res/icon_tab_me.png”是图片的路径
自己在项目里创建一个res文件夹,然后放入需要的图片
tab 好看一点了吧
来源:https://blog.csdn.net/wangguoyang429883793/article/details/72582128
标签:小程序,tabbar,图标
0
投稿
猜你喜欢
python破解同事的压缩包密码
2022-09-25 01:09:34
MySQL 8.0 新特性之检查约束的实现
2024-01-23 15:25:08
ASP开发的WAP格式简易邮件系统实例
2008-06-10 17:00:00
页面自动刷新javascript代码大全
2010-06-28 18:54:00
Python+Plotly绘制精美的数据分析图
2022-01-09 13:02:05
php+redis实现注册、删除、编辑、分页、登录、关注等功能示例
2024-04-30 08:50:09
django实现支付宝支付实例讲解
2023-08-27 04:45:44
Python中使用摄像头实现简单的延时摄影技术
2023-10-24 01:31:04
async/await与promise(nodejs中的异步操作问题)
2024-04-22 22:43:39
i++循环与i-–循环的执行效率(递增与递减效率)
2023-05-28 03:07:40
免费开源百度编辑器(UEditor)使用方法
2023-06-01 18:05:08
python函数参数(必须参数、可变参数、关键字参数)
2023-09-17 07:54:28
前端图片懒加载的原理与3种实现方式举例
2024-04-17 10:20:02
Python 马氏距离求取函数详解
2023-08-27 01:28:58
Python海龟绘图详解
2022-07-26 02:02:02
详解MySQL双活同步复制四种解决方案
2024-01-13 04:39:47
Python之re模块详解
2021-12-18 07:06:24
Python中使用jpype调用Jar包中的实现方法
2023-04-24 13:48:05
平面设计中的文字设计
2009-01-15 12:09:00
Python深度学习之实现卷积神经网络
2021-08-11 01:57:01