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

更新时间：2018年10月17日 11:08:43 作者：国苏

这篇文章主要介绍了微信小程序开发之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"
   },

   {
    "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 好看一点了吧

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

您可能感兴趣的文章:

javascript jq 弹出层实例
javascript jq 弹出提示效果实现的方法有很多，可能会在某些地方看到过，下面为大家演示个示例介绍下如何实现jq 弹出层，感兴趣的朋友可以参考下
2013-08-08
正则表达式,替换所有HTML标签的简单实例
下面小编就为大家带来一篇正则表达式,替换所有HTML标签的简单实例。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2016-11-11
如何基于uni-app实现微信小程序一键登录与退出登录功能
uni-app 是使用vue的语法+小程序的标签和API的一套框架,是一套代码多端使用,目前是大前端的一种趋势,下面这篇文章主要给大家介绍了关于如何基于uni-app实现微信小程序一键登录与退出登录功能的相关资料,需要的朋友可以参考下
2022-09-09
js取float型小数点后两位数的方法
js中取小数点后两位方法最常用的就是四舍五入函数了，前面我介绍过js中四舍五入一此常用函数，这里正好用上，下面我们一起来看取float型小数点后两位一些方法总结
2014-01-01
jquery+css3实现网页背景花瓣随机飘落特效
在qq空间可以自定义一些插件，装饰空间，大家通常就是复制代码到空间粘贴，会实现非常美观的效果，有的会随机飘落一些花瓣，那么这种效果用代码怎么实现的呢，下面小编给大家详解jquery实现网页背景花瓣随机飘落特效，需要的朋友可以参考下
2015-08-08
javascript String 对象
javascript数据库操作方法包括字符串大小写，字符串搜索，提取字符串等
2008-04-04
javascript页面上使用动态时间具体实现
这篇文章主要介绍了javascript在页面上使用动态时间实现示例,需要的朋友可以参考下
2014-03-03
原生js实现随机点名
这篇文章主要为大家详细介绍了原生js实现随机点名，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-07-07
JS判断两个时间大小的示例代码
本篇文章只要是对JS判断两个时间大小的示例代码进行了介绍，需要的朋友可以过来参考下，希望对大家有所帮助
2014-01-01
javascript跟随鼠标x,y坐标移动的字效果
javascript跟随鼠标x,y坐标移动的字效果...
2007-04-04