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


Posted in Javascript onOctober 17, 2018

前期准备 :注册,填材料,验证等等: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是页面的一些属性

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

这个样子太丑了 我们先来美化一下这个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 好看一点了吧

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
NiftyCube——轻松实现圆角边框
Feb 20 Javascript
document.designMode的功能与使用方法介绍
Nov 22 Javascript
最常用的12种设计模式小结
Aug 09 Javascript
游览器中javascript的执行过程(图文)
May 20 Javascript
网页加载时页面显示进度条加载完成之后显示网页内容
Dec 23 Javascript
使用javascipt---实现二分查找法
Apr 10 Javascript
javascript的内存管理详解
Aug 07 Javascript
jQuery filter函数使用方法
May 19 Javascript
jQuery的内容过滤选择器学习教程
Apr 18 Javascript
BootStrap表单验证 FormValidation 调整反馈图标位置的实例代码
May 17 Javascript
基于ssm框架实现layui分页效果
Jul 27 Javascript
javaScript代码飘红报错看不懂?读完这篇文章再试试
Aug 19 Javascript
解决百度Echarts图表坐标轴越界的方法
Oct 17 #Javascript
vue实现循环切换动画
Oct 17 #Javascript
element-ui upload组件多文件上传的示例代码
Oct 17 #Javascript
bootstrap table合并行数据并居中对齐效果
Oct 17 #Javascript
IE9 elementUI文件上传的问题解决
Oct 17 #Javascript
vue src动态加载请求获取图片的方法
Oct 17 #Javascript
node实现分片下载的示例代码
Oct 17 #Javascript
You might like
模板引擎Smarty深入浅出介绍
2006/12/06 PHP
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
YII模块实现绑定二级域名的方法
2014/07/09 PHP
Codeigniter校验ip地址的方法
2015/03/21 PHP
PHP生成唯一订单号的方法汇总
2015/04/16 PHP
PHP mysql事务问题实例分析
2016/01/18 PHP
Laravel 数据库加密及数据库表前缀配置方法
2019/10/10 PHP
JS 建立对象的方法
2007/04/21 Javascript
写了10年的Javascript也未必全了解的连续赋值运算
2011/03/25 Javascript
基于JavaScript 数据类型之Boolean类型分析介绍
2013/04/19 Javascript
[原创]推荐10款最热门jQuery UI框架
2014/08/19 Javascript
用JavaScript实现页面重定向功能的教程
2015/06/04 Javascript
js图片轮播效果实现代码
2020/04/18 Javascript
javascript冒泡排序小结
2016/04/10 Javascript
基于jQuery实现选项卡效果
2017/01/04 Javascript
js微信应用场景之微信音乐相册案例分享
2017/08/11 Javascript
JavaScript轮播停留效果的实现思路
2018/05/24 Javascript
微信小程序实现带缩略图轮播效果
2018/11/04 Javascript
微信小程序使用canvas的画图操作示例
2019/01/18 Javascript
JavaScript页面倒计时功能完整示例
2019/05/15 Javascript
jQuery HTML css()方法与css类实例详解
2020/05/20 jQuery
Python的Flask框架中使用Flask-Migrate扩展迁移数据库的教程
2016/06/14 Python
Python连接SQLServer2000的方法详解
2017/04/19 Python
Python常见排序操作示例【字典、列表、指定元素等】
2018/08/15 Python
使用Django搭建一个基金模拟交易系统教程
2019/11/18 Python
python离线安装外部依赖包的实现
2020/02/13 Python
python判断元素是否存在的实例方法
2020/09/24 Python
高中生自我鉴定范文
2013/10/30 职场文书
小学家长评语大全
2014/04/16 职场文书
公司踏青活动方案
2014/08/16 职场文书
2015年校长新年寄语
2014/12/08 职场文书
远程教育培训心得体会
2016/01/09 职场文书
2016党员干部廉洁自律心得体会
2016/01/13 职场文书
MySQL8.0.18配置多主一从
2021/06/21 MySQL
SpringBoot中使用Redis作为全局锁示例过程
2022/03/24 Java/Android
python pygame 开发五子棋双人对弈
2022/05/02 Python