微信小程序开发之自定义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 相关文章推荐
锋利的jQuery 要点归纳(一) jQuery选择器
Mar 21 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
使用jQuery fancybox插件打造一个实用的数据传输模态弹出窗体
Jan 15 Javascript
js 实现浏览历史记录示例
Apr 20 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 Javascript
jQuery自动完成插件completer附源码下载
Jan 04 Javascript
BootStrap初学者对弹出框和进度条的使用感觉
Jun 27 Javascript
引用jquery框架后出错的解决方法
Aug 09 Javascript
JS日程管理插件FullCalendar简单实例
Feb 07 Javascript
javascript基础练习之翻转字符串与回文
Feb 20 Javascript
实现高性能javascript的注意事项
May 27 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
CURL的学习和应用(附多线程实现)
2013/06/03 PHP
php常用ODBC函数集(详细)
2013/06/24 PHP
全新Mac配置PHP开发环境教程
2016/02/03 PHP
php使用CURL模拟GET与POST向微信接口提交及获取数据的方法
2016/09/23 PHP
javascript打开新窗口同时关闭旧窗口
2009/01/16 Javascript
使用javascript获取页面名称
2014/12/23 Javascript
详细分析使用AngularJS编程中提交表单的方式
2015/06/19 Javascript
jquery实现的Banner广告收缩效果代码
2015/09/02 Javascript
JS实现可关闭的对联广告效果代码
2015/09/14 Javascript
JavaScript实现下拉菜单的显示和隐藏
2016/01/05 Javascript
JS实现图片延迟加载并淡入淡出效果的简单方法
2016/08/25 Javascript
js中scrollTop()方法和scroll()方法用法示例
2016/10/03 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
AngularJS 文件上传控件 ng-file-upload详解
2017/01/13 Javascript
解决webpack打包速度慢的解决办法汇总
2017/07/06 Javascript
Javascript读写cookie的实例源码
2019/03/16 Javascript
用vscode开发vue应用的方法步骤
2019/05/06 Javascript
通过实践编写优雅的JavaScript代码
2019/05/30 Javascript
jQuery实现的图片点击放大缩小功能案例
2020/01/02 jQuery
[01:06:54]DOTA2-DPC中国联赛 正赛 SAG vs DLG BO3 第二场 2月28日
2021/03/11 DOTA
python命令行参数解析OptionParser类用法实例
2014/10/09 Python
Python3环境安装Scrapy爬虫框架过程及常见错误
2019/07/12 Python
python实现用类读取文件数据并计算矩形面积
2020/01/18 Python
Django自关联实现多级联动查询实例
2020/05/19 Python
Django修改app名称和数据表迁移方案实现
2020/09/17 Python
css3实现圆锥渐变conic-gradient效果
2020/02/12 HTML / CSS
德购商城:德国进口直邮商城
2017/06/13 全球购物
戴尔马来西亚官网:Dell Malaysia
2020/05/02 全球购物
国旗下的讲话演讲稿
2014/05/08 职场文书
处级领导班子全部召开专题民主生活会情况汇报
2014/09/27 职场文书
党员个人批评与自我批评
2014/10/14 职场文书
2015年大学班长个人工作总结
2015/04/24 职场文书
MySQL实战记录之如何快速定位慢SQL
2022/03/23 MySQL
python实现手机推送 代码也就10行左右
2022/04/12 Python
Python中的 enumerate和zip详情
2022/05/30 Python
Java Redisson多策略注解限流
2022/09/23 Java/Android