微信小程序开发之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 相关文章推荐
jQuery 白痴级入门教程
Nov 11 Javascript
ko knockoutjs动态属性绑定技巧应用
Nov 14 Javascript
浅析js中的浮点型运算问题
Jan 06 Javascript
js加载读取内容及显示与隐藏div示例
Feb 13 Javascript
关于javascript事件响应的基础语法总结(必看篇)
Dec 26 Javascript
Javascript循环删除数组中元素的几种方法示例
May 18 Javascript
详解AngularJS跨页面传值(ui-router)
Aug 23 Javascript
js禁止表单重复提交
Aug 29 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
vue + element-ui的分页问题实现
Dec 17 Javascript
小程序异步问题之多个网络请求依次执行并依次收集请求结果
May 05 Javascript
Vue 处理表单input单行文本框的实例代码
May 09 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查询ip所在地的方法
2014/12/05 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
PHP flush 函数使用注意事项
2016/08/26 PHP
浅析PHP中的闭包和匿名函数
2017/12/25 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
权威JavaScript 中的内存泄露模式
2007/08/13 Javascript
JavaScript中的Window窗口对象
2008/01/16 Javascript
ExtJS4 Grid改变单元格背景颜色及Column render学习
2013/02/06 Javascript
JS 实现Json查询的方法实例
2013/04/12 Javascript
JavaScript阻止浏览器返回按钮的方法
2015/03/18 Javascript
AngularJS学习笔记之基本指令(init、repeat)
2015/06/16 Javascript
深入解读JavaScript中的Hoisting机制
2015/08/12 Javascript
浅谈JavaScript的push(),pop(),concat()方法
2016/06/03 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
微信小程序 本地存储及登录页面处理实例详解
2017/01/11 Javascript
JS实现直接运行html代码的方法
2017/03/13 Javascript
详解Vue 实例中的生命周期钩子
2017/03/21 Javascript
Vue利用路由钩子token过期后跳转到登录页的实例
2017/10/26 Javascript
浅谈vuejs实现数据驱动视图原理
2018/02/23 Javascript
使用Vue组件实现一个简单弹窗效果
2018/04/23 Javascript
新版小程序登录授权的方法
2018/12/12 Javascript
原生JavaScript实现贪吃蛇游戏
2020/11/04 Javascript
轻松掌握python设计模式之策略模式
2016/11/18 Python
pandas数据分组和聚合操作方法
2018/04/11 Python
利用Python模拟登录pastebin.com的实现方法
2019/07/12 Python
利用Python pandas对Excel进行合并的方法示例
2020/11/04 Python
使用Canvas操作像素的方法
2018/06/14 HTML / CSS
2014年自我评价
2014/01/04 职场文书
不打扫卫生检讨书
2014/02/12 职场文书
学校出纳员岗位职责
2014/03/18 职场文书
《雨点儿》教学反思
2014/04/14 职场文书
个人四风对照检查材料
2014/09/26 职场文书
学生会感恩节活动方案
2014/10/11 职场文书
党委书记个人检查对照材料思想汇报
2014/10/11 职场文书
三八妇女节寄语
2015/02/27 职场文书
在vue中import()语法不能传入变量的问题及解决
2022/04/01 Vue.js