微信小程序开发之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 弹出层实例

    javascript jq 弹出提示效果实现的方法有很多,可能会在某些地方看到过,下面为大家演示个示例介绍下如何实现jq 弹出层,感兴趣的朋友可以参考下
    2013-08-08
  • 正则表达式,替换所有HTML标签的简单实例

    正则表达式,替换所有HTML标签的简单实例

    下面小编就为大家带来一篇正则表达式,替换所有HTML标签的简单实例。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11
  • 如何基于uni-app实现微信小程序一键登录与退出登录功能

    如何基于uni-app实现微信小程序一键登录与退出登录功能

    uni-app 是使用vue的语法+小程序的标签和API的一套框架,是一套代码多端使用,目前是大前端的一种趋势,下面这篇文章主要给大家介绍了关于如何基于uni-app实现微信小程序一键登录与退出登录功能的相关资料,需要的朋友可以参考下
    2022-09-09
  • js取float型小数点后两位数的方法

    js取float型小数点后两位数的方法

    js中取小数点后两位方法最常用的就是四舍五入函数了,前面我介绍过js中四舍五入一此常用函数,这里正好用上,下面我们一起来看取float型小数点后两位一些方法总结
    2014-01-01
  • jquery+css3实现网页背景花瓣随机飘落特效

    jquery+css3实现网页背景花瓣随机飘落特效

    在qq空间可以自定义一些插件,装饰空间,大家通常就是复制代码到空间粘贴,会实现非常美观的效果,有的会随机飘落一些花瓣,那么这种效果用代码怎么实现的呢,下面小编给大家详解jquery实现网页背景花瓣随机飘落特效,需要的朋友可以参考下
    2015-08-08
  • javascript String 对象

    javascript String 对象

    javascript数据库操作方法包括字符串大小写,字符串搜索,提取字符串等
    2008-04-04
  • javascript页面上使用动态时间具体实现

    javascript页面上使用动态时间具体实现

    这篇文章主要介绍了javascript在页面上使用动态时间实现示例,需要的朋友可以参考下
    2014-03-03
  • 原生js实现随机点名

    原生js实现随机点名

    这篇文章主要为大家详细介绍了原生js实现随机点名,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-07-07
  • JS判断两个时间大小的示例代码

    JS判断两个时间大小的示例代码

    本篇文章只要是对JS判断两个时间大小的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-01-01
  • javascript跟随鼠标x,y坐标移动的字效果

    javascript跟随鼠标x,y坐标移动的字效果

    javascript跟随鼠标x,y坐标移动的字效果...
    2007-04-04

最新评论