微信小程序开发之自定义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 相关文章推荐
JSChart轻量级图形报表工具(内置函数中文参考)
Oct 11 Javascript
使用apply方法处理数组的三个技巧[译]
Sep 20 Javascript
JS 两个字符串时间的天数差计算
Aug 25 Javascript
JS按字节截取字符长度实例
Nov 20 Javascript
jQuery中position()方法用法实例
Jan 16 Javascript
jquery复选框多选赋值给文本框的方法
Jan 27 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
iScroll.js 使用方法参考
May 16 Javascript
AngularJS中实现动画效果的方法
Jul 28 Javascript
使用ReactJS实现tab页切换、菜单栏切换、手风琴切换和进度条效果
Oct 17 Javascript
JS三目运算(三元运算)方法详解
Mar 01 Javascript
VueCli4项目配置反向代理proxy的方法步骤
May 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
php2html php生成静态页函数
2008/12/08 PHP
PHP操作MongoDB时的整数问题及对策说明
2011/05/02 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
php中用foreach来操作数组的代码
2011/07/17 PHP
使用php验证复选框有效性的示例
2013/11/13 PHP
CodeIgniter采用config控制的多语言实现根据浏览器语言自动转换功能
2014/07/18 PHP
php将日期格式转换成xx天前的格式
2015/04/16 PHP
关于PHP文件的自动运行方法分析
2016/05/13 PHP
thinkPHP分组后模板无法加载问题解决方法
2016/07/12 PHP
php获得文件夹下所有文件的递归算法的简单实例
2016/11/01 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
phpstudy2020搭建站点的实现示例
2020/10/30 PHP
让焦点自动跳转
2006/07/01 Javascript
js实现背景图自适应窗口大小
2017/01/10 Javascript
vue2.0嵌套路由实现豆瓣电影分页功能(附demo)
2017/03/13 Javascript
jsTree事件和交互以及插件plugins详解
2017/08/29 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
深入理解Vue.js轻量高效的前端组件化方案
2018/12/10 Javascript
js的继承方法小结(prototype、call、apply)(推荐)
2019/04/17 Javascript
JS学习笔记之闭包小案例分析
2019/05/29 Javascript
通过vue刷新左侧菜单栏操作
2020/08/06 Javascript
在Python中操作字符串之replace()方法的使用
2015/05/19 Python
Selenium 模拟浏览器动态加载页面的实现方法
2018/05/16 Python
浅谈pytorch和Numpy的区别以及相互转换方法
2018/07/26 Python
详解在Python中以绝对路径或者相对路径导入文件的方法
2019/08/30 Python
Python实现EM算法实例代码
2020/10/04 Python
pycharm 快速解决python代码冲突的问题
2021/01/15 Python
HTML5中input输入框默认提示文字向左向右移动的示例代码
2020/09/10 HTML / CSS
后勤岗位职责
2013/11/26 职场文书
求职推荐信范文
2013/12/01 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书
社区优秀志愿者先进事迹
2014/05/09 职场文书
公司放假通知范文
2015/04/14 职场文书
卫生院义诊活动总结
2015/05/07 职场文书
喜迎建国70周年:有关爱国的名言名句
2019/09/24 职场文书