微信小程序开发之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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
JavaScript 学习历程和心得分享
Dec 12 Javascript
js图片自动切换效果处理代码
May 07 Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 Javascript
js判断设备是否为PC并调整图片大小
Feb 12 Javascript
js防止DIV布局滚动时闪动的解决方法
Oct 30 Javascript
详解Javascript几种跨域方式总结
Feb 27 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
JavaScript动态创建二维数组的方法示例
Feb 01 Javascript
js判断一个对象是数组(函数)的方法实例
Dec 19 Javascript
Vue循环中多个input绑定指定v-model实例
Aug 31 Javascript
Vue如何实现组件间通信
May 15 Vue.js
解决百度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 和 HTML
2006/10/09 PHP
php实现的美国50个州选择列表实例
2015/04/20 PHP
Yii2框架redis基本应用示例
2018/07/13 PHP
PHP iconv()函数字符编码转换的问题讲解
2019/03/22 PHP
PHP 进程池与轮询调度算法实现多任务的示例代码
2019/11/26 PHP
XmlUtils JS操作XML工具类
2009/10/01 Javascript
EXT中xtype的含义分析
2010/01/07 Javascript
Javascript/Jquery——简单定时器的多种实现方法
2013/07/03 Javascript
js监听键盘事件示例代码
2013/07/26 Javascript
使用Node.js为其他程序编写扩展的基本方法
2015/06/23 Javascript
jQuery密码强度检测插件passwordStrength用法实例分析
2015/10/30 Javascript
[原创]Bootstrap 中下拉菜单修改成鼠标悬停直接显示
2016/04/14 Javascript
jQuery实现鼠标滚动图片延迟加载效果附源码下载
2016/06/28 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
浅谈es6 javascript的map数据结构
2017/12/14 Javascript
JS实现点击复选框变更DIV显示状态的示例代码
2017/12/18 Javascript
js判断输入框不能为空格或null值的实现方法
2018/03/02 Javascript
vue左右侧联动滚动的实现代码
2018/06/06 Javascript
js制作提示框插件
2020/12/24 Javascript
Python读取环境变量的方法和自定义类分享
2014/11/22 Python
使用python绘制常用的图表
2016/08/27 Python
python 实现一个贴吧图片爬虫的示例
2017/10/12 Python
Python(Django)项目与Apache的管理交互的方法
2018/05/16 Python
使用tensorflow实现线性svm
2018/09/07 Python
如何定义TensorFlow输入节点
2020/01/23 Python
Python pip配置国内源的方法
2020/02/14 Python
python将数据插入数据库的代码分享
2020/08/16 Python
护士自我鉴定范文
2013/10/06 职场文书
刘胡兰的英雄事迹材料
2014/02/11 职场文书
高中学生期末评语
2014/04/25 职场文书
国际政治学专业推荐信
2014/09/26 职场文书
寝室长工作失责检讨书
2014/10/06 职场文书
教师年度考核个人总结
2015/02/12 职场文书
2015年学校关工委工作总结
2015/04/03 职场文书
《大禹治水》教学反思
2016/02/22 职场文书
JS轻量级函数式编程实现XDM三
2022/06/16 Javascript