微信小程序开发之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更优雅的兼容
Aug 12 Javascript
JQuery.closest(),parent(),parents()寻找父结点
Feb 17 Javascript
使用jQuery同时控制四张图片的伸缩实现代码
Apr 19 Javascript
文件编码导致jquery失效的解决方法
Jun 26 Javascript
js实现文本框中输入文字页面中div层同步获取文本框内容的方法
Mar 03 Javascript
javascript 中的事件委托详解
Oct 25 Javascript
jQuery实现ToolTip元素定位显示功能示例
Nov 23 Javascript
jQuery插件JWPlayer视频播放器用法实例分析
Jan 11 Javascript
基于Marquee.js插件实现的跑马灯效果示例
Jan 25 Javascript
纯jQuery实现前端分页功能
Mar 23 jQuery
Vue.js表单标签中的单选按钮、复选按钮和下拉列表的取值问题
Nov 22 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
Apr 26 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 第二节 数据类型之数值型
2012/04/28 PHP
windows下的WAMP环境搭建图文教程(推荐)
2017/07/27 PHP
[IE&FireFox兼容]JS对select操作
2007/01/07 Javascript
多浏览器支持的右下角浮动窗口
2010/04/01 Javascript
让你的博客飘雪花超出屏幕依然看得见
2013/01/04 Javascript
js图片自动切换效果处理代码
2013/05/07 Javascript
JS动态修改表格cellPadding和cellSpacing的方法
2015/03/31 Javascript
JavaScript实现的简单烟花特效代码
2015/10/20 Javascript
详解Bootstrap插件
2016/04/25 Javascript
原生js实现新闻列表展开/收起全文功能
2017/01/20 Javascript
使用原生的javascript来实现轮播图
2017/02/24 Javascript
webpack配置sass模块的加载的方法
2017/07/30 Javascript
浅谈super-vuex使用体验
2018/06/25 Javascript
js动态设置select下拉菜单的默认选中项实例
2018/08/21 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
2019/10/12 jQuery
解决vue的router组件component在import时不能使用变量问题
2020/07/26 Javascript
KMP算法精解及其Python版的代码示例
2016/06/01 Python
Python爬虫代理IP池实现方法
2017/01/05 Python
Python中模块与包有相同名字的处理方法
2017/05/05 Python
python自定义异常实例详解
2017/07/11 Python
Flask模拟实现CSRF攻击的方法
2018/07/24 Python
python实现高斯投影正反算方式
2020/01/17 Python
python os模块在系统管理中的应用
2020/06/22 Python
Python3以GitHub为例来实现模拟登录和爬取的实例讲解
2020/07/30 Python
Belvilla德国:在线预订度假屋
2018/04/10 全球购物
Java的for语句中break, continue和return的区别
2013/12/19 面试题
请介绍一下Ant
2016/07/22 面试题
电子商务毕业生求职信
2013/11/10 职场文书
餐饮管理自我介绍信
2014/01/15 职场文书
教师研修随笔感言
2014/01/23 职场文书
酒店经理职责
2014/01/30 职场文书
奉献家乡演讲稿
2014/09/13 职场文书
律师授权委托书范本
2014/10/07 职场文书
幼师自荐信范文
2015/03/06 职场文书
2015暑假打工实践报告
2015/07/13 职场文书
2019年房屋委托租赁合同范本(通用版)!
2019/07/17 职场文书