微信小程序开发之自定义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 TextArea动态显示剩余字符
Oct 22 Javascript
jqPlot jquery的页面图表绘制工具
Jul 25 Javascript
jQuery 获取对象 根据属性、内容匹配, 还有表单元素匹配
May 31 Javascript
js 调用父窗口的具体实现代码
Jul 15 Javascript
js页面跳转的常用方法整理
Oct 18 Javascript
js实现带关闭按钮始终显示在网页最底部工具条的方法
Mar 02 Javascript
基于jquery fly插件实现加入购物车抛物线动画效果
Apr 05 Javascript
常用js,css文件统一加载方法(推荐) 并在加载之后调用回调函数
Sep 23 Javascript
easyui下拉框动态级联加载的示例代码
Nov 29 Javascript
JavaScript惰性载入函数实例分析
Mar 27 Javascript
JavaScript闭包相关知识解析
Oct 19 Javascript
vue制作抓娃娃机的示例代码
Apr 17 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
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
PHP框架Laravel中实现supervisor执行异步进程的方法
2017/06/07 PHP
php + WebUploader实现图片批量上传功能
2019/05/06 PHP
基于Jquery的文字自动截取(提供源代码)
2011/08/09 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
2011/09/19 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
JQuery中SetTimeOut传参问题探讨
2013/05/10 Javascript
改变隐藏的input中value的值代码
2013/12/30 Javascript
jQuery获取样式中颜色值的方法
2015/01/29 Javascript
JavaScript 表单处理实现代码
2015/04/13 Javascript
浅谈javascript获取元素transform参数
2015/07/24 Javascript
ES6中非常实用的新特性介绍
2016/03/10 Javascript
基于JS模仿windows文件按名称排序效果
2016/06/29 Javascript
关于原生js中bind函数的简单实现
2016/08/10 Javascript
JavaScript给每一个li节点绑定点击事件的实现方法
2016/12/01 Javascript
jsonp跨域请求实现示例
2017/03/13 Javascript
Vue-Router的使用方法
2018/09/05 Javascript
ES6的异步操作之promise用法和async函数的具体使用
2019/12/06 Javascript
Python使用PIL库实现验证码图片的方法
2016/03/11 Python
python使用arcpy.mapping模块批量出图
2017/03/06 Python
python3下实现搜狗AI API的代码示例
2018/04/10 Python
Python logging模块用法示例
2018/08/28 Python
使用GitHub和Python实现持续部署的方法
2019/05/09 Python
python识别图像并提取文字的实现方法
2019/06/28 Python
django formset实现数据表的批量操作的示例代码
2019/12/06 Python
如何一键升级Python所有包
2020/11/05 Python
Python爬虫自动化爬取b站实时弹幕实例方法
2021/01/26 Python
Clos19英国:高档香槟、葡萄酒和烈酒在线购物平台
2020/07/10 全球购物
趣味体育活动方案
2014/02/08 职场文书
房地产开盘策划方案
2014/02/10 职场文书
夫妻分居协议书范本
2014/11/28 职场文书
党员剖析材料范文
2014/12/18 职场文书
放弃遗产继承公证书
2015/01/26 职场文书
幼儿园托班开学寄语(2016春季)
2015/12/03 职场文书
2016年三八节红领巾广播稿
2015/12/17 职场文书
竞选稿之小学班干部
2019/10/31 职场文书