微信小程序开发之tabbar图标和颜色的实现
程序员文章站
2024-01-04 10:28:46
前期准备 :注册,填材料,验证等等:https://mp.weixin.qq.com
1.浏览一遍简易教程,下载相应的开发工具
写一个小例子
点击左侧的 “编辑”-》...
前期准备 :注册,填材料,验证等等: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 好看一点了吧
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。