微信小程序自定义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 相关文章推荐
使用UglifyJS合并/压缩JavaScript的方法
Mar 07 Javascript
js设置组合快捷键/tabindex功能的方法
Nov 21 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
JS中sort函数排序用法实例分析
Jun 16 Javascript
js时间查询插件使用详解
Apr 07 Javascript
基于js 本地存储(详解)
Aug 16 Javascript
BACKBONE.JS 简单入门范例
Oct 17 Javascript
webpack4之SplitChunksPlugin使用指南
Jun 12 Javascript
JavaScript中arguments和this对象用法分析
Aug 08 Javascript
浅谈javascript错误处理
Aug 11 Javascript
js实现简单进度条效果
Mar 25 Javascript
JS原生实现轮播图的几种方法
Mar 23 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
快速配置PHPMyAdmin方法
2008/06/05 PHP
深入php list()函数的详解
2013/06/05 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
php创建session的方法实例详解
2015/01/27 PHP
使用GD库生成带阴影文字的图片
2015/03/27 PHP
php 根据URL下载远程图片、压缩包、pdf等文件到本地
2019/07/26 PHP
前淘宝前端开发工程师阿当的PPT中有JS技术理念问题
2010/01/15 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
理解Javascript闭包
2013/11/01 Javascript
浅析用prototype定义自己的方法
2013/11/14 Javascript
原生javascript获取元素样式
2014/12/31 Javascript
jQuery实现仿淘宝带有指示条的图片转动切换效果完整实例
2015/03/04 Javascript
JS+CSS实现下拉列表框美化效果(3款)
2015/08/15 Javascript
轻松掌握JavaScript状态模式
2016/09/07 Javascript
[原创]SyntaxHighlighter自动识别并加载脚本语言
2017/02/07 Javascript
JS简单获取日期相差天数的方法
2017/04/24 Javascript
jQuery树插件zTree使用方法详解
2017/05/02 jQuery
用javascript获取任意颜色的更亮或更暗颜色值示例代码
2017/07/21 Javascript
vue 2.8.2版本配置刚进入时候的默认页面方法
2018/09/21 Javascript
一份超级详细的Vue-cli3.0使用教程【推荐】
2018/11/15 Javascript
js键盘事件实现人物的行走
2020/01/17 Javascript
[02:04]完美世界城市挑战赛秋季赛报名开始 谁是solo路人王?
2019/10/10 DOTA
在Django的视图中使用form对象的方法
2015/07/18 Python
使用python编写简单的小程序编译成exe跑在win10上
2018/01/15 Python
python调用虹软2.0第三版的具体使用
2019/02/22 Python
pytorch中torch.max和Tensor.view函数用法详解
2020/01/03 Python
浅谈图像处理中掩膜(mask)的意义
2020/02/19 Python
使用jupyter notebook直接打开.md格式的文件
2020/04/10 Python
MySQL面试题目集锦
2016/04/14 面试题
2015年工商所工作总结
2015/05/21 职场文书
酒会开场白大全
2015/06/01 职场文书
红色革命电影观后感
2015/06/18 职场文书
2019个人工作计划书的格式及范文!
2019/07/04 职场文书
厉害!这是Redis可视化工具最全的横向评测
2021/07/15 Redis
Python使用mitmproxy工具监控手机 下载手机小视频
2022/04/18 Python
Win2008系统搭建DHCP服务器
2022/06/25 Servers