微信小程序开发之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 相关文章推荐
js中的referrer返回上一页使用介绍
Sep 26 Javascript
解决js中window.open弹出的是上次的缓存页面问题
Dec 29 Javascript
jQuery插件开发的两种方法及$.fn.extend的详解
Jan 16 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
requirejs按需加载angularjs文件实例
Jun 08 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
Jun 09 jQuery
详解Vue路由钩子及应用场景(小结)
Nov 07 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
微信小程序实现打卡日历功能
Sep 21 Javascript
原生js通过一行代码实现简易轮播图
Jun 05 Javascript
highcharts.js数据绑定方式代码实例
Nov 13 Javascript
JavaScript实现H5接金币功能(实例代码)
Feb 22 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
在Windows版的PHP中使用ADO
2006/10/09 PHP
PHP header()函数常用方法总结
2014/04/11 PHP
理解JavaScript变量作用域更轻松
2009/10/25 Javascript
基于jQuery的js分页代码
2010/06/10 Javascript
FireBug 调试JS入门教程 如何调试JS
2013/12/23 Javascript
javascript字符串与数组转换汇总
2015/05/26 Javascript
JS控制表单提交的方法
2015/07/09 Javascript
基于Jquery代码实现支持PC端手机端幻灯片代码
2015/11/17 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
2016/02/25 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
Node.js操作mysql数据库增删改查
2016/03/30 Javascript
JavaScript简单生成 N~M 之间随机数的方法
2017/01/13 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
Jquery把获取到的input值转换成json
2017/05/15 jQuery
js处理包含中文的字符串实例
2017/10/11 Javascript
vue template中slot-scope/scope的使用方法
2018/09/06 Javascript
JavaScript显式数据类型转换详解
2019/03/18 Javascript
React+EggJs实现断点续传的示例代码
2020/07/07 Javascript
[47:31]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.12
2020/12/16 DOTA
gearman的安装启动及python API使用实例
2014/07/08 Python
python构建自定义回调函数详解
2017/06/20 Python
DataFrame中的object转换成float的方法
2018/04/10 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python3.5面向对象与继承图文实例详解
2019/04/24 Python
Python bytes string相互转换过程解析
2020/03/05 Python
关于解决iframe标签嵌套问题的解决方法
2020/03/04 HTML / CSS
以实惠的价格提供高品质的时尚:Newchic
2018/01/18 全球购物
什么是数组名
2012/05/10 面试题
保护环境倡议书
2014/04/14 职场文书
活动总结模板
2014/05/09 职场文书
邹越感恩父母演讲稿
2014/08/28 职场文书
合作经营协议书范本
2014/09/16 职场文书
人才市场接收函
2015/01/30 职场文书
会计工作能力自我评价
2015/03/05 职场文书
为什么说餐饮很难做,是因为你不了解这些新规则
2019/08/20 职场文书
python和anaconda的区别
2022/05/06 Python