微信小程序开发之自定义tabBar的实现


Posted in Javascript onSeptember 06, 2018

最近开发微信小程序,公司要求做一个类似闲鱼的tabbar,但是网上大多资料的tabbar都会在页面切换的时候重新渲染,所以我写了一个不会重新渲染的tabbar,有需要的直接拿走不谢。https://github.com/SuRuiGit/wxapp-customTabbar

在小程序的开发文档中,对tabbar是这样说明的:

如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面。

Tip:

1.当设置 position 为 top 时,将不会显示 icon

2.tabBar 中的 list 是一个数组,只能配置最少2个、最多5个 tab,tab 按数组的顺序排序。

在实际开发过程中,小程序自带的tabbar样式并不能满足设计提供的开发需求,所以需要我们自定义一套属于自己的tabbar。

使用步骤如下:

第一步:找到项目中的tabbarComponent目录,拷贝到你的工程中,然后将tabbarComponent->icon图标替换成你自己的tabbar图片

第二步:到app.json中配置tabBar,这里我就不细说了,只强调闲鱼的tabbar中间的按钮是跳到二级页面,所以不配置在tabBar的list中

第三步:在app.js的onLaunch方法中调用wx.hideTabBar();隐藏系统自带的tabBar

第四步:在app.js中的globalData中加入自定义tabbar的参数,再加入一个方法给tabBar.list配置中的页面使用,代码如下

globalData: {
  userInfo: null,
  tabBar: {
   "backgroundColor": "#ffffff",
   "color": "#979795",
   "selectedColor": "#1c1c1b",
   "list": [
    {
     "pagePath": "/page/index/index",
     "iconPath": "icon/icon_home.png",
     "selectedIconPath": "icon/icon_home_HL.png",
     "text": "首页"
    },
    {
     "pagePath": "/page/myRelease/index",
     "iconPath": "icon/icon_release.png",
     "isSpecial": true,
     "text": "发布"
    },
    {
     "pagePath": "/page/mine/index",
     "iconPath": "icon/icon_mine.png",
     "selectedIconPath": "icon/icon_mine_HL.png",
     "text": "我的"
    }
   ]
  }
 }
editTabbar: function() {
  let tabbar = this.globalData.tabBar;
  let currentPages = getCurrentPages();
  let _this = currentPages[currentPages.length - 1];
  let pagePath = _this.route;
  (pagePath.indexOf('/') != 0) && (pagePath = '/' + pagePath);
  for (let i in tabbar.list) {
   tabbar.list[i].selected = false;
   (tabbar.list[i].pagePath == pagePath) && (tabbar.list[i].selected = true);
  }
  _this.setData({
   tabbar: tabbar
  });
 },

第五步:在tabBar的list中配置的页面的.js文件的data中加入tabbar:{},并在onload方法中调用app.editTabbar();

第六步:在tabBar的list中配置的页面的.json文件中加入

"usingComponents": {

"tabbar": "../../tabbarComponent/tabbar"

}

在.wxml文件中加入<tabbar tabbar="{{tabbar}}"></tabbar>

到目前为止,自定义tabbar就完成啦,撒花!!!!!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习笔记(八) js内置对象
Jun 19 Javascript
对table和ul实现js分页示例分享
Feb 24 Javascript
JavaScript数组的一些奇葩行为
Jan 25 Javascript
JavaScript事件详细讲解
Jun 27 Javascript
jQuery EasyUI封装简化操作
Sep 18 Javascript
微信小程序入门教程
Nov 18 Javascript
走进javascript——不起眼的基础,值和分号
Feb 24 Javascript
给vue项目添加ESLint的详细步骤
Sep 29 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
js中apply()和call()的区别与用法实例分析
Aug 14 Javascript
使用taro开发微信小程序遇到的坑总结
Apr 08 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 #Javascript
Vue-component全局注册实例
Sep 06 #Javascript
Vue 监听列表item渲染事件方法
Sep 06 #Javascript
在Vue组件中获取全局的点击事件方法
Sep 06 #Javascript
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
JavaScript函数、闭包、原型、面向对象学习笔记
Sep 06 #Javascript
Vue中使用clipboard实现复制功能
Sep 05 #Javascript
You might like
让CodeIgniter数据库缓存自动过期的处理的方法
2014/06/12 PHP
PHP中unset,array_splice删除数组中元素的区别
2014/07/28 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
Yii入门教程之目录结构、入口文件及路由设置
2014/11/25 PHP
Yii2 批量插入、更新数据实例
2017/03/15 PHP
php中的异常和错误浅析
2017/05/03 PHP
Laravel如何同时连接多个数据库详解
2019/08/13 PHP
js 获取浏览器高度和宽度值(多浏览器)
2009/09/02 Javascript
extJs 文本框后面加上说明文字+下拉列表选中值后触发事件
2009/11/27 Javascript
JS 文件传参及处理技巧分析
2010/05/13 Javascript
jQuery侧边栏随窗口滚动实现方法
2013/03/04 Javascript
jQuery实现Meizu魅族官方网站的导航菜单效果
2015/09/14 Javascript
功能强大的Bootstrap组件(结合js)
2016/08/03 Javascript
JS常用倒计时代码实例总结
2017/02/07 Javascript
jquery处理checkbox(复选框)是否被选中实例代码
2017/06/12 jQuery
backbone简介_动力节点Java学院整理
2017/07/14 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
详解angular脏检查原理及伪代码实现
2018/06/08 Javascript
在Angular中使用JWT认证方法示例
2018/09/10 Javascript
react 兄弟组件如何调用对方的方法示例
2018/10/23 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
uniapp开发小程序实现滑动页面控制元素的显示和隐藏效果
2020/12/10 Javascript
react中hook介绍以及使用教程
2020/12/11 Javascript
使用py2exe在Windows下将Python程序转为exe文件
2016/03/04 Python
一百多行python代码实现抢票助手
2018/09/25 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
详解pandas获取Dataframe元素值的几种方法
2020/06/14 Python
python 数据类型强制转换的总结
2021/01/25 Python
印刷工程专业应届生求职信
2013/09/29 职场文书
大学生的自我鉴定范文
2014/01/21 职场文书
政协会议宣传标语
2014/10/09 职场文书
2014年大学教师工作总结
2014/12/02 职场文书
工作态度怎么写
2015/06/25 职场文书
2015秋季幼儿园开学通知
2015/07/16 职场文书
小学体育跳绳课教学反思
2016/02/16 职场文书
导游词之南京夫子庙
2019/12/09 职场文书