微信小程序自定义tabBar在uni-app的适配详解


Posted in Javascript onSeptember 30, 2019
引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API

需求

需要在微信小程序中,实现一个中间图标突出显示的异形导航栏。

如下图

微信小程序自定义tabBar在uni-app的适配详解

实现方法设计

要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到。那么,就有以下两种可替代方法。

  1. 在每一个页面都加载一个tabBar组件,与页面同时渲染。
  2. 设置自定义tabBar,修改tabBar的样式。

优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题。方法2则是微信官方提供的,自定义方式,相信在性能方面也会有很大的优势。故选择方法2。

1. 查看文档及官方Demo

官方文档

简要描述一下就是需要在根目录中加入一个custom-tab-bar目录,里面的文件结构与自定义组件的结构一致。然后再在小程序配置文件中修改tabbar为custom模式。

官方代码

主要重点为三个部分

配置文件

微信小程序自定义tabBar在uni-app的适配详解

custom-tab-bar目录

微信小程序自定义tabBar在uni-app的适配详解

页面生命周期中的设置索引方法

微信小程序自定义tabBar在uni-app的适配详解

这段代码其实很容易理解,pageLifetimes就是监听组件所在页面的生命周期。上述代码就是监听页面显示。当页面显示后,获取到tabBar的对象,然后再设置tabBar中的index索引。

2. 迁移到uni-app框架

上面的方法是使用微信小程序的开发方式,而我使用的是uni-app框架开发微信小程序的。所以我们需要把它们移植到uni-app框架内。

配置文件的修改

uni-app中,page.json被编译为微信小程序的app.json。所以,我们直接修改page.json

微信小程序自定义tabBar在uni-app的适配详解

custom-tab-bar目录的适配

我们知道,uni-app使用的是类Vue开发,将一个Vue文件编译为四个微信页面文件(wxml,wxss,json,js)。那么,是否可以直接写一个custom-tab-bar.vue的文件呢?刚开始我也是这么想的,后来发现uni-app只会编译page目录和component目录下的vue文件。而微信小程序要求custom-tab-bar必须在项目的根目录下。那么就只能在uni-app下创建一个custom-tab-bar目录,并老老实实写微信四件套了。

微信小程序自定义tabBar在uni-app的适配详解

写完后,uni-app会将该目录完美的复制至微信小程序项目的根目录。

tab页面内的适配方法

这个在我实际开发中,是最令我头痛的了。因为微信小程序的this引用与uni-app的this引用并不相同。所以如果直接复制代码是会编译出错的。而另一个问题则是,uni-app并未提供pageLifetimes的事件监听。

在我经过一番摸索之后,发现将设置索引方法写在onShow事件里面,效果是等效的。接下来便只剩下this的问题了。

如果直接复制的话,会出现无任何效果的情况

微信小程序自定义tabBar在uni-app的适配详解

因为uni-app的this引用不一样,所以它在判断getTabBar的时候,获取的是“undefined”所以不会执行下面的操作。如果你将判断去掉,则会直接报“undefined”错误。

难道实现不了?其实不然,万变不离其宗。uni-app也是编译到小程序的,所以绝对有迹可循。

我们首先看看uni-app里面this的内容。

微信小程序自定义tabBar在uni-app的适配详解

我们可以很明显的看到里面有个$mp的对象,说明这应该是微信小程序专用的对象。接下来我们继续分析$mp

微信小程序自定义tabBar在uni-app的适配详解

这里面有一个隐藏很深的getTabBar方法,我们直接调用它,和在微信小程序里面调用this.getTabBar是等效的。

所以我们就可以把onShow里面的内容写成这样。

微信小程序自定义tabBar在uni-app的适配详解

一些优雅点的封装

设置索引方法独立出来

在methods对象中,添加

setTabBarIndex(index){
      if (typeof this.$mp.page.getTabBar === 'function' &&
        this.$mp.page.getTabBar()) {
        this.$mp.page.getTabBar().setData({
          selected:index
        })
      }
    }

使用mixin避免重复书写复制

main.js中,添加

Vue.mixin({
  methods:{
    setTabBarIndex(index){
      if (typeof this.$mp.page.getTabBar === 'function' &&
        this.$mp.page.getTabBar()) {
        this.$mp.page.getTabBar().setData({
          selected:index
        })
      }
    }
  }
})

混入后的使用

在页面文件中

onShow() {
      this.setTabBarIndex(0) //index为当前tab的索引
    }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript下IE与FF兼容函数收集
Sep 17 Javascript
jquery判断字符输入个数(数字英文长度记为1,中文记为2,超过长度自动截取)
Oct 15 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
Aug 08 Javascript
jQuery文字横向滚动效果的实现代码
May 31 Javascript
Web纯前端“旭日图”实现元素周期表
Mar 10 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
关于Ajax的原理以及代码封装详解
Sep 08 Javascript
一文快速了解JQuery中的AJAX
May 31 jQuery
JS实现的字符串数组去重功能小结
Jun 17 Javascript
微信小程序表单验证WxValidate的使用
Nov 27 Javascript
JS代码编译器Monaco使用方法
Jun 11 Javascript
详解小程序云开发攻略(解决最棘手的问题)
Sep 30 #Javascript
webpack3升级到webpack4遇到问题总结
Sep 30 #Javascript
uploadify插件实现多个图片上传并预览
Sep 30 #Javascript
vue中使用[provide/inject]实现页面reload的方法
Sep 30 #Javascript
JavaScript中的null和undefined用法解析
Sep 30 #Javascript
vue resource发送请求的几种方式
Sep 30 #Javascript
Bootstrap table 实现树形表格联动选中联动取消功能
Sep 30 #Javascript
You might like
通过table标签,PHP输出EXCEL的实现方法
2013/07/24 PHP
PHP获取Exif缩略图的方法
2015/07/13 PHP
php在windows环境下获得cpu内存实时使用率(推荐)
2018/02/08 PHP
对 lightbox JS 图片控件进行了一下改造, 使其他支持复杂的图片说明
2010/03/20 Javascript
js和jquery使按钮失效为不可用状态的方法
2014/01/26 Javascript
jQuery实现鼠标划过展示大图的方法
2015/03/09 Javascript
JS递归遍历对象获得Value值方法技巧
2016/06/14 Javascript
Node.js批量给图片加水印的方法
2016/11/15 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
JS switch判断 三目运算 while 及 属性操作代码
2017/09/03 Javascript
JavaScript中递归实现的方法及其区别
2017/09/12 Javascript
vue 父组件通过v-model接收子组件的值的代码
2019/10/27 Javascript
js 递归json树实现根据子id查父id的方法分析
2019/11/08 Javascript
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
python判断windows隐藏文件的方法
2014/03/21 Python
Python中replace方法实例分析
2014/08/20 Python
Python实现SVN的目录周期性备份实例
2015/07/17 Python
Python md5与sha1加密算法用法分析
2017/07/14 Python
python爬虫使用cookie登录详解
2017/12/27 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
在Python 字典中一键对应多个值的实例
2019/02/03 Python
Python利用sqlacodegen自动生成ORM实体类示例
2019/06/04 Python
python实现H2O中的随机森林算法介绍及其项目实战
2019/08/29 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Python下划线5种含义代码实例解析
2020/07/10 Python
python爬取代理IP并进行有效的IP测试实现
2020/10/09 Python
GUESS Factory加拿大:牛仔裤、服装及配饰
2019/09/20 全球购物
乌克兰排名第一的在线旅游超市:Farvater.Travel
2020/01/02 全球购物
意大利顶级奢侈品电商:LUISAVIAROMA(支持中文)
2020/05/26 全球购物
市场开发与营销专业求职信范文
2014/05/01 职场文书
2014党员民主评议个人总结
2014/09/10 职场文书
民族学专业职业生涯规划范文:积跬步以至千里
2014/09/11 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
升学宴学生致辞
2015/07/27 职场文书
《西游记》读后感(3篇)
2019/09/20 职场文书
Matlab如何实现矩阵复制扩充
2021/06/02 Python