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

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

需求

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

如下图

实现方法设计

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

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

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

1. 查看文档及官方Demo

官方文档

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

官方代码

主要重点为三个部分

配置文件

custom-tab-bar目录

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

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

2. 迁移到uni-app框架

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

配置文件的修改

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

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目录,并老老实实写微信四件套了。

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

tab页面内的适配方法

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

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

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

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

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

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

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

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

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

一些优雅点的封装

设置索引方法独立出来

在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的索引
    }

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

(0)

相关推荐

  • 详解使用uni-app开发微信小程序之登录模块

    从微信小程序官方发布的公告中我们可获知:小程序体验版.开发版调用 wx.getUserInfo 接口,将无法弹出授权询问框,默认调用失败,需使用 <button open-type="getUserInfo"></button> 引导用户主动进行授权操作: 1.当用户未授权过,调用该接口将直接报错 2.当用户授权过,可以使用该接口获取用户信息 但在实际开发中我们可能需要弹出授权询问框,因此需要我们自己来写模拟授权弹框(主要是对<buttonopen-typ

  • uni-app之APP和小程序微信授权方法

    uni-app 介绍 uni-app 是一个使用 Vue.js 开发跨平台应用的前端框架. 适用平台:Android.iOS.微信小程序.实现了一套代码,同时发布到Android.iOS.微信小程序. 参考官方:https://uniapp.dcloud.io/ APP微信授权 检测服务商 检测手机上是否安装微信.QQ.新浪微博等. uni.getProvider({ service: 'oauth', success: function (res) { console.log(res.prov

  • 微信小程序自定义可搜索的picker组件示例详解

    PC端开发,组件库是有可搜索的select可用 但是在手机端微信小程序开发的时候,使用select就不太合适了,小程序端的选项一般都是是使用picker 但是,问题又来了,微信小程序官方并没有给我们提供可搜索的Picker 人家没给,那我们就自定义一个呗 别的到没啥,就是感觉交互上有点奇怪 具体效果如下图所示: 废话不多说了,上代码: myPicker.wxml <view class="date-background" hidden="{{flag}}"&g

  • 微信小程序自定义tabBar组件开发详解

    本文实例为大家分享了微信小程序自定义tabBar组件的具体代码,供大家参考,具体内容如下 以下代码保存在github地址 先看一看目录 template文件夹里存放tabbar模板. template/template.wxml <template name="tabBar"> <view class="tabBar"> <block wx:for="{{tabBar}}" wx:for-item="ite

  • 微信小程序自定义tabBar的踩坑实践记录

    微信官方文档对自定义 tabBar 的阐述较为潦草,在开发自定义 tabBar 过程中我踩了很多坑,因此在此处做个总结. 我使用 Vant Weapp作为 UI 组件库,下面以此组件库为例. 定义 tabBar 创建自定义 tabBar 文件 创建一个与 /pages 的同级目录,命名为  /custom-tab-bar,注意目录层级与目录命名问题,不可用其他名称命名. 在 /custom-tab-bar 下创建四个文件: index.js index.json index.wxml index

  • 微信小程序自定义tabbar组件

    本文实例为大家分享了微信小程序自定义tabbar组件的具体代码,供大家参考,具体内容如下 由于项目需求,必须自己写组件: 第一步:在App.json中配置tabBar,自定也组件也必须配置,"custom": true,list里配置所有的tabbar页面. "tabBar": { "custom": true, "color": "red", "selectedColor": &quo

  • 关于微信小程序自定义tabbar问题详析

    目录 1.首先按照官方组件在app.json中定义tabbar 2.在项目根目录创建自定义tabbar组件 3.组件内容如下: 4.在pages下的各个页面组件引入tabbar 总结 1.首先按照官方组件在app.json中定义tabbar "tabBar": { "custom": true, "backgroundColor": "#FFFFFF", "borderStyle": "white

  • 微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)

    微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案,cover-view不兼容,具体内容如下所示: 1.从微信小程序的官网扣下来的demo,实际测试中,发现6s ios10 系统不兼容,里面的内容出不来 <cover-view class="tab-bar"> <cover-view class="tab-bar-border"></cover-view> <cover-view wx:for=&

  • 微信小程序 页面跳转事件绑定的实例详解

    微信小程序 页面跳转事件绑定的实例详解 什么是事件 事件是视图层到逻辑层的通讯方式. 事件可以将用户的行为反馈到逻辑层进行处理. 事件可以绑定在组件上,当达到触发事件,就会执行逻辑层中对应的事件处理函数. 事件对象可以携带额外信息,如 id, dataset, touches. 在组件中绑定一个事件处理函数. 如bindtap,当用户点击该组件的时候会在该页面对应的Page中找到相应的事件处理函数 <view bindtap="view"> <text bindtap

  • SpringBoot+微信小程序实现文件上传与下载功能详解

    目录 1.文件上传 1.1 后端部分 1.2 小程序前端部分 1.3 实现效果 2.文件下载 2.1 后端部分 2.2 小程序前端部分 2.3 实现效果 1.文件上传 1.1 后端部分 1.1.1 引入Apache Commons FIleUpload组件依赖 <!--文件上传与下载相关的依赖--> <dependency> <groupId>commons-fileupload</groupId> <artifactId>commons-fil

  • 微信小程序实现页面导航与传参功能详解

    目录 一.页面导航 概述 分类 声明式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 编程式导航 导航到tabBar页面 导航到非tabBar页面 后退导航 导航传参 声明式导航传参 编程式导航传参 一.页面导航 概述 顾名思义,页面导航指的是页面之间的相互跳转, 而页面传参就是在加载页面时将特定的参数传递过去从而成为该页面的参数. 分类 声明式导航:在页面上声明一个<navigator>导航组件,通过点击该组件实现页面跳转 编程式导航:通过调用小程序专门的导航API,实现页

  • 微信小程序中子页面向父页面传值实例详解

    微信小程序中子页面向父页面传值实例详解 上面一张图是编辑款项页面,下面一张图是点击了编辑款项页面中选择好友的图标后打开的子页面.这个时候点选子页面的某个好友时,需要把好友的名字传递回编辑款项父页面. 采取的方法: 从页面路由栈中直接获取和操作目标Page对象,这种方式,是通过调用小程序的API: getCurrentPages(),来获取当前页面路由栈的信息,这个路由栈中按照页面的路由顺序存放着相应的Page对象,我们可以很容易的获取到上一级页面的完整Page对象,从而使直接调用Page对象的属

随机推荐