微信小程序自定义tabBar的踩坑实践记录


Posted in Javascript onNovember 06, 2020

微信官方文档对自定义 tabBar 的阐述较为潦草,在开发自定义 tabBar 过程中我踩了很多坑,因此在此处做个总结。

我使用 Vant Weapp 作为 UI 组件库,下面以此组件库为例。

定义 tabBar

创建自定义 tabBar 文件

创建一个与 /pages 的同级目录,命名为  /custom-tab-bar,注意目录层级与目录命名问题,不可用其他名称命名。
在 /custom-tab-bar 下创建四个文件:

index.js
index.json
index.wxml
index.wxss

index.js

在 index.js 中我们定义相关数据:

  • active:当前被点击 tab 的索引
  • list:tab 列表

以及一个切换 tab 时触发的方法:

function onChange(event):标签切换时触发,修改 active 值,点亮被点击的 tab 并进行页面跳转

Component({
 data: {
 // 选中的 tab 
 active: null,
 // 菜单列表
 list: [
  {
  pagePath: '/pages/subscriptions/subscriptions',
  text: '订阅',
  name: 'subscriptions',
  icon: 'bullhorn-o'
  },
  {
  pagePath: '/pages/profile/profile',
  text: '我的',
  name: 'profile',
  icon: 'user-o'
  }
 ]
 },
 methods: {
 // 标签切换
 onChange: function (event) {
  this.setData({ active: event.detail })
  wx.switchTab({
  url: this.data.list[event.detail].pagePath,
  })
 }
 }
})

index.json

在 index.json 中,将 component 参数值设为 true,代表这是一个自定义组件:

{
 "component": true
}

因为我使用了Vant Weapp 的 tabBar 标签栏,所以还需引入额外组件:

{
 "component": true,
 "usingComponents": {
 "van-tabbar": "@vant/weapp/tabbar/index",
 "van-tabbar-item": "@vant/weapp/tabbar-item/index",
 "van-icon": "@vant/weapp/icon/index"
 }
}

index.wxml

在 index.wxml 中定义组件形态,我在此处使用Vant Weapp 的 tabBar 标签栏,详见代码,不再赘述。

<van-tabbar active="{{ active }}" bind:change="onChange">
 <van-tabbar-item 
 wx:for="{{list}}" 
 wx:key="index"
 icon="{{item.icon}}" 
 data-path="{{item.pagePath}}">
 {{item.text}}
 </van-tabbar-item>
</van-tabbar>

配置 app.json

在 app.json 中配置如下参数:

  • usingComponents:仅声明即可
  • tabBar:tabBar 组件的具体配置
    • custom:设为 true,表示使用自定义组件
    • list:tab 页列表,在列表中的页面将被设置为 tab 页,自动加载 tabBar
{
 "usingComponents":{

 },
 "tabBar":{
  "custom":true,
  "color":"#000000",
  "selectedColor":"#000000",
  "backgroundColor":"#000000",
  "list":[
   {
    "pagePath":"pages/subscriptions/subscriptions",
    "text":"订阅列表",
    "iconPath":"",
    "selectedIconPath":""
   },
   {
    "pagePath":"pages/profile/profile",
    "text":"关于我",
    "iconPath":"",
    "selectedIconPath":""
   }
  ]
 }
}

实现 tabBar 选中态

根据微信官方文档描述,每个 tab 页面 tabBar 的实例是不同的:

每个 tab 页下的自定义 tabBar 组件实例是不同的,可通过自定义组件下的 getTabBar 接口,获取当前页面的自定义 tabBar 组件实例。

显而易见,每当切换 tab 页时,我们都需要更新 tabBar 的选中态。关于选中态的实现,官方文档描述如下:

注意:如需实现 tab 选中态,要在当前页面下,通过 getTabBar 接口获取组件实例,并调用 setData 更新选中态。

我们可以在使用到 tabBar 的页面中这样实现:

Page({
 onShow: function () {
 if (typeof this.getTabBar === 'function' && this.getTabBar()) {
  this.getTabBar().setData({
  // 当前页面的 tabBar 索引
  active: 1
  })
 }
 }
})

至此,一个自定义 tabBar 的实现已全部完成。

踩坑

getTabBar() 方法缺失

在实现 tabBar 选中态时遇到 getTabBar() 方法缺失的问题。在小程序开发工具中跳转到 getTabBar() 方法的定义,我们可以看到:

/**
 * 返回当前页面的 custom-tab-bar 的组件实例
 *
 * 最低基础库版本:[`2.6.2`](https://developers.weixin.qq.com/miniprogram/dev/framework/compatibility.html)
 **/
getTabBar(): TrivialInstance

该方法的最低基础版本库为 2.6.2,我们修改 project.config.json 文件中的 libVersion 字段,升级到指定版本库即可。
升级版本库后 tabBar 组件报错

报错内容如下:

Component is not found in path "custom-tab-bar/index"

该原因是由于 tabBar 组件目录放置错误导致的,需要注意以下几点:

  1. 目录需与 /pages 同级
  2. 目录名称是 custom-tab-bar
  3. 目录下所包含的文件名为 index.后缀
  4. 在 app.json 配置中,tabBar 下的 custom 字段需设置为 true

getTabBar() 始终返回 null

依旧是目录放置与文件命名问题,处理方法同上。

另外,不需要在 app.json 的 usingComponents 引入 tabBar 组件,如果你放置目录与命名正确,小程序会自动引入。

参考文档

  • 小程序官方文档:自定义 tabBar
  • 官方自定义 tabbar 的显示和隐藏
  • 使用自定义 tabbar,在 tab 页中使用 this.getTabBar() 一直返回 null,什么原因?
  • getTabBar 无法调用 接口相关说明在哪里?

总结

到此这篇关于微信小程序自定义tabBar踩坑实践记录的文章就介绍到这了,更多相关微信小程序自定义tabBar踩坑内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
syntaxhighlighter 使用方法
Jul 02 Javascript
基于dropdown.js实现的两款美观大气的二级导航菜单
Sep 02 Javascript
javaScript实现可缩放的显示区效果代码
Oct 26 Javascript
深入理解JavaScript中为什么string可以拥有方法
May 24 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
vue的props实现子组件随父组件一起变化
Oct 27 Javascript
assert()函数用法总结(推荐)
Jan 25 Javascript
基于vue2实现上拉加载功能
Nov 28 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【矩形情况】
Dec 13 Javascript
Angular中innerHTML标签的样式不起作用的原因解析
Jun 18 Javascript
javascript(基于jQuery)实现鼠标获取选中的文字示例【测试可用】
Oct 26 jQuery
vue中echarts引入中国地图的案例
Jul 28 Javascript
浅谈nuxtjs校验登录中间件和混入(mixin)
Nov 06 #Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 #Javascript
vue中的计算属性和侦听属性
Nov 06 #Javascript
nuxt.js添加环境变量,区分项目打包环境操作
Nov 06 #Javascript
使用Vue实现一个树组件的示例
Nov 06 #Javascript
Nuxt.js 静态资源和打包的操作
Nov 06 #Javascript
微信小程序基于ColorUI构建皮皮虾短视频去水印组件
Nov 04 #Javascript
You might like
图书管理程序(三)
2006/10/09 PHP
PHP注释实例技巧
2008/10/03 PHP
ThinkPHP基于PHPExcel导入Excel文件的方法
2014/10/15 PHP
通过修改配置真正解决php文件上传大小限制问题(nginx+php)
2015/09/23 PHP
PHP实现的一致性哈希算法完整实例
2015/11/14 PHP
基于laravel制作APP接口(API)
2016/03/15 PHP
Yii2框架中日志的使用方法分析
2017/05/22 PHP
浅谈laravel-admin form中的数据,在提交后,保存前,获取并进行编辑
2019/10/21 PHP
Mootools 1.2教程 选项卡效果(Tabs)
2009/09/15 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
2013/01/09 Javascript
JavaScript调用堆栈及setTimeout使用方法深入剖析
2013/02/16 Javascript
提取字符串中年月日的函数代码
2013/11/05 Javascript
jQuery基于ajax实现星星评论代码
2015/08/07 Javascript
使用jQuery的load方法设计动态加载及解决被加载页面js失效问题
2017/03/01 Javascript
浅析vue 函数配置项watch及函数 $watch 源码分享
2018/11/22 Javascript
微信小程序实现复选框效果
2018/12/28 Javascript
微信小程序在线客服自动回复功能(基于node)
2019/07/03 Javascript
浅谈layui使用模板引擎动态渲染元素要注意的问题
2019/09/14 Javascript
原生JS与CSS实现软件卸载对话框功能
2019/12/05 Javascript
[38:38]完美世界DOTA2联赛PWL S3 access vs Rebirth 第二场 12.17
2020/12/18 DOTA
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
Python数据结构之哈夫曼树定义与使用方法示例
2018/04/22 Python
用python统计代码行的示例(包括空行和注释)
2018/07/24 Python
DataFrame.to_excel多次写入不同Sheet的实例
2019/12/02 Python
Python3 使用selenium插件爬取苏宁商家联系电话
2019/12/23 Python
Python解析微信dat文件的方法
2020/11/30 Python
CSS3实现可爱的小黄人动画
2016/07/11 HTML / CSS
欧洲领先的电子和电信零售商和服务提供商:Currys PC World Business
2017/12/05 全球购物
美国中西部家用医疗设备商店:Med Mart(轮椅、踏板车、升降机等)
2019/04/26 全球购物
Lovedrobe官网:英国领先的大码服装品牌
2019/09/19 全球购物
什么是数据库锁?Oracle中都有哪些类型的锁?
2015/08/21 面试题
挂牌仪式主持词
2014/03/20 职场文书
团支部推优材料
2014/05/21 职场文书
2014年教师党员自我评议
2014/09/19 职场文书
劳动争议和解协议书范本
2014/11/20 职场文书
自从在 IDEA 中用了热部署神器 JRebel 之后,开发效率提升了 10(真棒)
2021/06/26 Java/Android