微信小程序自定义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 相关文章推荐
xtree.js 代码
Mar 13 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
原生js实现的贪吃蛇网页版游戏完整实例
May 18 Javascript
2016年最热门的15 款代码语法高亮工具,美化你的代码
Jan 06 Javascript
JS hashMap实例详解
May 26 Javascript
改变checkbox默认选中状态及取值的实现代码
May 26 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
Node.js安装详细步骤教程(Windows版)详解
Sep 01 Javascript
微信小程序 简易计算器实现代码实例
Sep 02 Javascript
node.js域名解析实现方法详解
Nov 05 Javascript
使用JavaScript和MQTT开发物联网应用示例解析
Aug 07 Javascript
解决vue项目中遇到 Cannot find module ‘chalk‘ 报错的问题
Nov 05 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
php+dojo 的数据库保存拖动布局的一个方法dojo 这里下载
2007/03/07 PHP
关于PHP实现异步操作的研究
2013/02/03 PHP
php中chdir()函数用法实例
2014/11/13 PHP
浅谈PHP中JSON数据操作
2015/07/01 PHP
jQuery(1.6.3) 中css方法对浮动的实现缺陷分析
2011/09/09 Javascript
用js模拟struts2的多action调用示例
2014/05/19 Javascript
浅谈jQuery异步对象(XMLHttpRequest)
2014/11/17 Javascript
jQuery学习笔记之jQuery+CSS3的浏览器兼容性
2015/01/19 Javascript
javascript中FOREACH数组方法使用示例
2016/03/01 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
nodejs和php实现图片访问实时处理
2017/01/05 NodeJs
微信小程序开发之数据存储 参数传递 数据缓存
2017/04/13 Javascript
vue实现分环境打包步骤(给不同的环境配置相对应的打包命令)
2019/06/04 Javascript
IDEA安装vue插件图文详解
2019/09/26 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
详解vue中在循环中使用@mouseenter 和 @mouseleave事件闪烁问题解决方法
2020/04/07 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
[59:07]海涛为你详解DOTA2新版本“贤哲秘契”
2014/11/22 DOTA
[02:49]DAC2018决赛日TOP5 LGD开启黑暗之门绝杀VP
2018/04/08 DOTA
采用Psyco实现python执行速度提高到与编译语言一样的水平
2014/10/11 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
pyhton列表转换为数组的实例
2018/04/04 Python
windows下 兼容Python2和Python3的解决方法
2018/12/05 Python
python tkinter canvas使用实例
2019/11/04 Python
Python基于pygame实现单机版五子棋对战
2019/12/26 Python
Python类反射机制使用实例解析
2019/12/30 Python
利用python中的matplotlib打印混淆矩阵实例
2020/06/16 Python
html5与css3小应用
2013/04/03 HTML / CSS
请编写一个 C 函数,该函数在给定的内存区域搜索给定的字符,并返回该字符所在位置索引值
2014/09/15 面试题
师范应届生求职信
2013/11/15 职场文书
干部下基层实施方案
2014/03/14 职场文书
安全责任书范本
2014/04/15 职场文书
关于倡议书的范文
2015/04/29 职场文书
欠款纠纷起诉状
2015/05/19 职场文书
李强感恩观后感
2015/06/17 职场文书
签字仪式主持词
2015/07/03 职场文书