微信小程序自定义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 相关文章推荐
js判断为空Null与字符串为空简写方法
Feb 24 Javascript
jquery 3D 标签云示例代码
Jun 12 Javascript
JavaScript插件化开发教程 (四)
Jan 27 Javascript
jquery使用each方法遍历json格式数据实例
May 18 Javascript
Angular ng-repeat遍历渲染完页面后执行其他操作详细介绍
Dec 13 Javascript
node.js中express-session配置项详解
May 31 Javascript
解决ionic和angular上拉加载的问题
Aug 03 Javascript
Vue2.0实现将页面中表格数据导出excel的实例
Aug 09 Javascript
swiper插件自定义切换箭头按钮
Dec 28 Javascript
详解javascript函数写法大全
Mar 25 Javascript
js表达式与运算符简单操作示例
Feb 15 Javascript
vue如何搭建多页面多系统应用
Jun 17 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
php获取地址栏信息的代码
2008/10/08 PHP
php 获取select下拉列表框的值
2010/05/08 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
编译php 5.2.14+fpm+memcached(具体操作详解)
2013/06/18 PHP
PHP登录环节防止sql注入的方法浅析
2014/06/30 PHP
PHP使用内置dir类实现目录遍历删除
2015/03/31 PHP
PHP7之Mongodb API使用详解
2015/12/26 PHP
thinkphp中AJAX返回ajaxReturn()方法分析
2016/12/06 PHP
OAuth认证协议中的HMACSHA1加密算法(实例)
2017/10/25 PHP
select 控制网页内容隐藏于显示的实现代码
2010/05/25 Javascript
window.requestAnimationFrame是什么意思,怎么用
2013/01/13 Javascript
javascript ajax的5种状态介绍
2014/08/18 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
javascript HTML5 canvas实现打砖块游戏
2020/06/18 Javascript
Ajax+FormData+javascript实现无刷新表单信息提交
2016/10/24 Javascript
Windows系统下安装Node.js的步骤图文详解
2016/11/15 Javascript
jQuery获取选中单选按钮radio的值
2016/12/27 Javascript
js字符串与Unicode编码互相转换
2017/05/17 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
2017/09/07 jQuery
canvas绘制爱心的几种方法总结(推荐)
2017/10/31 Javascript
微信小程序map组件结合高德地图API实现wx.chooseLocation功能示例
2019/01/23 Javascript
微信小程序template模板与component组件的区别和使用详解
2019/05/22 Javascript
在微信小程序中使用mqtt服务的方法
2019/12/13 Javascript
简单介绍Python中的JSON模块
2015/04/08 Python
python查询sqlite数据表的方法
2015/05/08 Python
Python找出9个连续的空闲端口
2016/02/01 Python
Python使用装饰器模拟用户登陆验证功能示例
2018/08/24 Python
pytorch载入预训练模型后,实现训练指定层
2020/01/06 Python
解决Python spyder显示不全df列和行的问题
2020/04/20 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
荷兰包包购物网站:The Little Green Bag
2018/03/17 全球购物
.net面试题
2016/09/17 面试题
教师党性分析材料
2014/02/04 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
党员个人查摆剖析材料
2014/10/16 职场文书
资料员岗位职责
2015/02/10 职场文书