微信小程序开发之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 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
关于跨站脚本攻击问题
Dec 22 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
jquery封装的对话框简单实现
Jul 21 Javascript
限制textbox或textarea输入字符长度的JS代码
Oct 16 Javascript
jquery实现点击向下展开菜单项(伸缩导航)效果
Aug 22 Javascript
AngularJS框架中的双向数据绑定机制详解【减少需要重复的开发代码量】
Jan 19 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
cordova入门基础教程及使用中遇到的一些问题总结
Nov 14 Javascript
vue router的基本使用和配置教程
Nov 05 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 Javascript
JS页面动态绘图工具SVG,Canvas,VML介简介
Oct 16 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验证是否是md5编码的简单代码
2014/04/01 PHP
php foreach正序倒序输出示例代码
2014/07/01 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
使用jQuery清空file文件域的解决方案
2013/04/12 Javascript
parentElement,srcElement的使用小结
2014/01/13 Javascript
js清空form表单中的内容示例
2014/05/20 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
js实现checkbox全选、不选与反选的方法
2015/02/09 Javascript
javascript实现给定半径求出圆的面积
2015/06/26 Javascript
基于BootStrap Metronic开发框架经验小结【六】对话框及提示框的处理和优化
2016/05/12 Javascript
利用纯Vue.js构建Bootstrap组件
2016/11/03 Javascript
JS实现的计数排序与基数排序算法示例
2017/12/04 Javascript
vue2.0 实现页面导航提示引导的方法
2018/03/13 Javascript
详解vuex commit保存数据技巧
2018/12/25 Javascript
vue+elementUI实现图片上传功能
2019/08/20 Javascript
js实现橱窗展示效果
2020/01/11 Javascript
javascript 函数的暂停和恢复实例详解
2020/04/25 Javascript
Python 实现随机数详解及实例代码
2017/04/15 Python
python中实现数组和列表读取一列的方法
2018/04/03 Python
Python决策树之基于信息增益的特征选择示例
2018/06/25 Python
python获取磁盘号下盘符步骤详解
2019/06/19 Python
python实现连连看辅助之图像识别延伸
2019/07/17 Python
你还在@微信官方?聊聊Python生成你想要的微信头像
2019/09/25 Python
基于Python绘制个人足迹地图
2020/06/01 Python
python 数据类型强制转换的总结
2021/01/25 Python
基于HTML5的齿轮动画特效
2016/02/29 HTML / CSS
精彩的英文自荐信
2014/01/30 职场文书
治庸问责心得体会
2014/09/12 职场文书
党员自我评议对照检查材料
2014/09/27 职场文书
2014年服务员工作总结
2014/11/18 职场文书
2014年企业团支部工作总结
2014/12/10 职场文书
2015年教育实习工作总结
2015/04/24 职场文书
巾帼建功标兵先进事迹材料
2016/02/29 职场文书
2019年学校消防安全责任书(2篇)
2019/10/09 职场文书
CSS3实现的文字弹出特效
2021/04/16 HTML / CSS
彻底理解golang中什么是nil
2021/04/29 Golang