微信小程序开发之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 相关文章推荐
火狐textarea输入法的bug的触发及解决
Jul 24 Javascript
通过js获取上传的图片信息(临时保存路径,名称,大小)然后通过ajax传递给后端的方法
Oct 01 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
Validform表单验证总结篇
Oct 31 Javascript
利用JS屏蔽页面中的Enter按键提交表单的方法
Nov 25 Javascript
BootStrap组件之进度条的基本用法
Jan 19 Javascript
javascript 的变量、作用域和内存问题
Apr 19 Javascript
浅析Angular2子模块以及异步加载
Apr 24 Javascript
vue中使用heatmapjs的示例代码(结合百度地图)
Sep 05 Javascript
Vue分页效果与购物车功能
Dec 13 Javascript
vue.js 解决v-model让select默认选中不生效的问题
Jul 28 Javascript
JS轮播图的实现方法
Aug 24 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
PHP图片处理类 phpThumb参数用法介绍
2012/03/11 PHP
php+mysql查询优化简单实例
2015/01/13 PHP
php基于Redis消息队列实现的消息推送的方法
2018/11/28 PHP
JavaScript For Beginners(转载)
2007/01/05 Javascript
为Yahoo! UI Extensions Grid增加内置的可编辑器
2007/03/10 Javascript
jquery 实现的全选和反选
2009/04/15 Javascript
将CKfinder整合进CKEditor3.0的新方法
2010/01/10 Javascript
jQuery Lightbox 图片展示插件使用说明
2010/04/25 Javascript
JQuery slideshow的一个小问题(如何发现及解决过程)
2013/02/06 Javascript
JS冒泡事件的快速解决方法
2013/12/16 Javascript
数据结构中的各种排序方法小结(JS实现)
2016/07/23 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
2017/02/17 Javascript
vue + element-ui实现简洁的导入导出功能
2017/12/22 Javascript
vue实现在一个方法执行完后执行另一个方法的示例
2018/08/25 Javascript
layer关闭弹出窗口触发表单提交问题的处理方法
2019/09/25 Javascript
JS数组索引检测中的数据类型问题详解
2021/01/11 Javascript
[59:59]EG vs IG 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python打开网页和暂停实例
2014/09/30 Python
Python编程之列表操作实例详解【创建、使用、更新、删除】
2017/07/22 Python
Python快速排序算法实例分析
2017/11/29 Python
python实现两个经纬度点之间的距离和方位角的方法
2019/07/05 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
CSS3中文字镂空、透明值、阴影效果设置示例小结
2016/03/07 HTML / CSS
浅谈HTML5 服务器推送事件(Server-sent Events)
2017/08/01 HTML / CSS
Draper James官网:知名演员瑞茜·威瑟斯彭所创品牌
2017/10/25 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
机械专业应届生求职信
2013/09/21 职场文书
厨师岗位职责
2013/11/12 职场文书
语文教育专业推荐信范文
2013/11/25 职场文书
六查六看剖析材料
2014/02/15 职场文书
市场部岗位职责范本
2015/04/15 职场文书
中小企业员工手册范本
2015/05/14 职场文书
实习证明格式范文
2015/06/16 职场文书
检讨书范文
2019/04/16 职场文书
css3带你实现3D转换效果
2022/02/24 HTML / CSS
Python调用腾讯API实现人脸身份证比对功能
2022/04/04 Python