微信小程序开发之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 相关文章推荐
JavaScript调用堆栈及setTimeout使用方法深入剖析
Feb 16 Javascript
jQuery中dom元素上绑定的事件详解
Apr 24 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 Javascript
简单实现AngularJS轮播图效果
Apr 10 Javascript
jQuery使用ajax_动力节点Java学院整理
Jul 05 jQuery
详解Angular系列之变化检测(Change Detection)
Feb 26 Javascript
vue+mousemove实现鼠标拖动功能(拖动过快失效问题解决方法)
Aug 24 Javascript
Vue Element UI + OSS实现上传文件功能
Jul 31 Javascript
三剑客:offset、client和scroll还傻傻分不清?
Dec 04 Javascript
JS操作JSON常用方法(10w阅读)
Dec 06 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
弄了个检测传输的参数是否为数字的Function
2006/12/06 PHP
ThinkPHP标签制作教程
2014/07/10 PHP
Mac环境下php操作mysql数据库的方法分享
2015/05/11 PHP
Linux下从零开始安装配置Nginx服务器+PHP开发环境
2015/12/21 PHP
JavaScript通过RegExp实现客户端验证处理程序
2013/05/07 Javascript
JavaScript转换二进制编码为ASCII码的方法
2015/04/16 Javascript
页面向下滚动ajax获取数据的实现方法(兼容手机)
2016/05/24 Javascript
详解Node.js如何开发命令行工具
2016/08/14 Javascript
js实现数组去重方法及效率?Ρ? target=
2017/02/14 Javascript
js中开关变量使用实例
2017/02/24 Javascript
详解vue-cli 本地开发mock数据使用方法
2018/05/29 Javascript
Node.js中的cluster模块深入解读
2018/06/11 Javascript
微信小程序获取用户信息及手机号(后端TP5.0)
2019/09/12 Javascript
js中switch语句的学习笔记
2020/03/25 Javascript
解决ant Design中Select设置initialValue时的大坑
2020/10/29 Javascript
JavaScript setTimeout()基本用法有哪些
2020/11/04 Javascript
tornado 多进程模式解析
2018/01/15 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Python处理session的方法整理
2019/08/29 Python
python实现网站微信登录的示例代码
2019/09/18 Python
基于Python批量生成指定尺寸缩略图代码实例
2019/11/20 Python
Python3将ipa包中的文件按大小排序
2020/04/17 Python
tensorflow模型文件(ckpt)转pb文件的方法(不知道输出节点名)
2020/04/22 Python
python中not、and和or的优先级与详细用法介绍
2020/11/03 Python
详解css3自定义滚动条样式写法
2017/12/25 HTML / CSS
自定义html标记替换html5新增元素
2008/10/17 HTML / CSS
Skyscanner加拿大:全球旅行搜索平台
2018/11/19 全球购物
会计电算化应届生求职信
2013/11/03 职场文书
大专毕业生自我鉴定
2013/11/21 职场文书
安全事故检讨书
2014/01/18 职场文书
烹饪自我鉴定
2014/03/01 职场文书
环境工程专业自荐信
2014/03/03 职场文书
HR求职自荐信范文
2014/06/21 职场文书
社区服务活动小结
2014/07/08 职场文书
HTML中的表单元素介绍
2022/02/28 HTML / CSS
使用CSS实现六边形的图片效果
2022/08/05 HTML / CSS