微信小程序开发之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事件写法实现代码
Jan 07 Javascript
javascript 弹出的窗口返回值给父窗口具体实现
Nov 23 Javascript
JavaScript实现关键字高亮功能
Nov 12 Javascript
jQuery中:last-child选择器用法实例
Dec 31 Javascript
TypeScript具有的几个不同特质
Apr 07 Javascript
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
你或许不知道的一些npm实用技巧
Jul 04 Javascript
JavaScript:ES2019 的新特性(译)
Aug 08 Javascript
JS检索下拉列表框中被选项目的索引号(selectedIndex)
Dec 17 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
解决Element中el-date-picker组件不回填的情况
Nov 07 Javascript
javascript实现计算器功能详解流程
Nov 01 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将access数据库转换到mysql数据库的方法
2014/12/24 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
php获取今日开始时间和结束时间的方法
2017/02/27 PHP
javascript之典型高阶函数应用介绍二
2013/01/10 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
如何用js判断dom是否有存在某class的值
2017/02/13 Javascript
vue-router路由参数刷新消失的问题解决方法
2017/06/17 Javascript
vue路由懒加载的实现方法
2018/03/12 Javascript
微信小程序实现多选删除列表数据功能示例
2019/01/15 Javascript
[33:28]完美世界DOTA2联赛PWL S3 PXG vs GXR 第三场 12.19
2020/12/24 DOTA
python新手经常遇到的17个错误分析
2014/07/30 Python
使用优化器来提升Python程序的执行效率的教程
2015/04/02 Python
Python3中使用urllib的方法详解(header,代理,超时,认证,异常处理)
2016/09/21 Python
Django后端发送小程序微信模板消息示例(服务通知)
2019/12/17 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
Python不支持 i ++ 语法的原因解析
2020/07/22 Python
Flask中jinja2的继承实现方法及实例
2021/03/03 Python
HTML5 CSS3新的WEB标准和浏览器支持
2009/07/16 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
2018/03/13 HTML / CSS
美国最大的香水连锁店官网:Perfumania
2016/08/15 全球购物
美国开幕式潮店:Opening Ceremony
2018/02/10 全球购物
可打印的优惠券、杂货和优惠券代码:Coupons.com
2018/06/12 全球购物
美国折扣香水网站:The Perfume Spot
2020/12/12 全球购物
优秀学生评语大全
2014/04/25 职场文书
餐厅筹备计划书
2014/04/25 职场文书
森林病虫害防治方案
2014/06/02 职场文书
水利水电专业自荐信
2014/07/08 职场文书
预备党员自我评价范文
2015/03/04 职场文书
个人年终总结范文
2015/03/09 职场文书
企业安全生产检查制度
2015/08/06 职场文书
工商局调档介绍信
2015/10/22 职场文书
创业计划书之水果店
2019/07/18 职场文书
工作计划范文之财务管理
2019/08/09 职场文书