微信小程序开发之tabbar图标和颜色的实现_微信小程序自定义tabBar - CSDN文库

微信小程序tabbar

31 浏览量更新于2023-03-03 评论收藏 41KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

主要介绍了微信小程序开发之tabbar图标和颜色的实现，小编觉得挺不错的，现在分享给大家，也给大家做个参

考。一起跟随小编过来看看吧

前期准备：注册，填材料，验证等等：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"

},

{

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余1页未读，立即下载

评论0

weixin_38656142

粉丝: 6
资源: 910

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈