微信小程序开发之tabbar图标和颜色的实现

网友投稿 624 2023-11-14

前期准备 ：注册，填材料，验证等等：https://mp.weixin.qq.com

微信小程序开发之tabbar图标和颜色的实现

1.浏览一遍简易教程，-相应的开发工具

写一个小例子

点击左侧的 “编辑”-》点击右侧代码里的 app.json 修改为

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
"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

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
{
"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 好看一点了吧

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 js 属性
上一篇:移动式警务站: 提高安全保障的新一步
下一篇:深圳APP开发公司要找哪家？应用公园在线APP制作值得一试
相关文章

 发表评论

暂时没有评论，来抢沙发吧~