微信小程序自定义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 相关文章推荐
Jquery 绑定时间实现代码
May 03 Javascript
jquery插件之信息弹出框showInfoDialog(成功/错误/警告/通知/背景遮罩)
Jan 09 Javascript
javascript实现百度地图鼠标滑动事件显示、隐藏
Apr 02 Javascript
php+ajax+jquery实现点击加载更多内容
May 03 Javascript
JS实现浏览器状态栏文字从右向左弹出效果代码
Oct 27 Javascript
关于javascript中dataset的问题小结
Nov 16 Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 Javascript
详解bootstrap的modal-remote两种加载方式【强化】
Jan 27 Javascript
Vue实现动态响应数据变化
Apr 28 Javascript
如何抽象一个Vue公共组件
Oct 17 Javascript
iview通过Dropdown(下拉菜单)实现的右键菜单
Oct 26 Javascript
JavaScript实现简单计时器
Jun 22 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随机生成福彩双色球号码的2种方法
2013/02/04 PHP
php中error与exception的区别及应用
2014/07/28 PHP
PHP时间和日期函数详解
2015/05/08 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
动态加载外部javascript文件的函数代码分享
2011/07/28 Javascript
提取jquery的ready()方法单独使用示例
2014/03/25 Javascript
javascript数组随机排序实例分析
2015/07/22 Javascript
JS实现复制功能
2017/03/01 Javascript
nodejs+express搭建多人聊天室步骤
2018/02/12 NodeJs
webpack vue项目开发环境局域网访问方法
2018/03/20 Javascript
vue-router3.0版本中 router.push 不能刷新页面的问题
2018/05/10 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
微信域名检测接口调用演示步骤(含PHP、Python)
2019/12/08 Javascript
基于JS正则表达式实现模板数据动态渲染(实现思路详解)
2020/03/07 Javascript
手把手教您实现react异步加载高阶组件
2020/04/07 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
2020/04/16 Javascript
JavaScript基于用户照片姓名生成海报
2020/05/29 Javascript
用python读写excel的方法
2014/11/18 Python
Python中顺序表的实现简单代码分享
2018/01/09 Python
python使用Pycharm创建一个Django项目
2018/03/05 Python
Windows下安装Scrapy
2018/10/17 Python
Python3 执行系统命令并获取实时回显功能
2019/07/09 Python
python3中替换python2中cmp函数的实现
2019/08/20 Python
浅析Python 多行匹配模式
2020/07/24 Python
怎样在 Applet 中建立自己的菜单(MenuBar/Menu)?
2012/06/20 面试题
电大学习个人自我评价范文
2013/10/04 职场文书
好的自荐信的要求
2013/10/30 职场文书
高中自我评价分享
2013/12/05 职场文书
《都江堰》教学反思
2014/02/07 职场文书
新学期决心书
2014/03/11 职场文书
2014年秋季开学典礼主持词
2014/08/02 职场文书
经典爱情感言
2015/08/03 职场文书
房屋转让协议书(标准范本)
2016/03/21 职场文书
html5移动端禁止长按图片保存的实现
2021/04/20 HTML / CSS
Mysql外键约束的创建与删除的使用
2022/03/03 MySQL
JavaScript声明变量和数据类型的转换
2022/04/12 Javascript