文档章节

微信小程序自定义tabbar填坑记

renjunjie
 renjunjie
发布于 2019/12/08 18:38
字数 830
阅读 6.4K
收藏 0

行业解决方案、产品招募中!想赚钱就来传!>>>

以下摘录自官方文档,重点标记了红色。

自定义 tabBar

基础库 2.5.0 开始支持,低版本需做兼容处理

自定义 tabBar 可以让开发者更加灵活地设置 tabBar 样式,以满足更多个性化的场景。

在自定义 tabBar 模式下

  • 为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配置项需完整声明,但这些字段不会作用于自定义 tabBar 的渲染。
  • 此时需要开发者提供一个自定义组件来渲染 tabBar,所有 tabBar 的样式都由该自定义组件渲染。推荐用 fixed 在底部的 cover-view + cover-image 组件渲染样式,以保证 tabBar 层级相对较高。
  • 与 tabBar 样式相关的接口,如 wx.setTabBarItem 等将失效。
  • 每个 tab 页下的自定义 tabBar 组件实例是不同的,可通过自定义组件下的 getTabBar 接口,获取当前页面的自定义 tabBar 组件实例。

注意:如需实现 tab 选中态,要在当前页面下,通过 getTabBar 接口获取组件实例,并调用 setData 更新选中态。可参考底部的代码示例。

使用流程

1. 配置信息

  • 在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。
  • 所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。

示例:

{
  "tabBar": {
    "custom": true,
    "color": "#000000",
    "selectedColor": "#000000",
    "backgroundColor": "#000000",
    "list": [{
      "pagePath": "page/component/index",
      "text": "组件"
    }, {
      "pagePath": "page/API/index",
      "text": "接口"
    }]
  },
  "usingComponents": {}
}

2. 添加 tabBar 代码文件

在代码根目录下添加入口文件:

custom-tab-bar/index.js
custom-tab-bar/index.json
custom-tab-bar/index.wxml
custom-tab-bar/index.wxss

3. 编写 tabBar 代码

用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。

通过以上可以做到自定义tabbar,但是有几个问题。

1、如果一个页面存在多个组件,不能控制那个页面显示,那个页面不显示。usingComponents

2、tabbar选中状态的处理。

解决方法:

1、第一个问题通过,css来控制,

Component({
  data: {
    "showFlag":"display:none",
    "selected":null,
    "color": "#767676",
    "selectedColor": "#007aff",
    "borderStyle": "white",
    "backgroundColor": "#fff",
    "list": [
      {
        "pagePath": "/pages/index/index",
        "text": "",
        "iconPath": "/assets/images/tab-bar/1.png",
        "selectedIconPath": "/assets/images/tab-bar/1-1.png"
      },
      {
        "pagePath": "/pages/index2/index",
        "text": "",
        "iconPath": "/assets/images/tab-bar/2.png",
        "selectedIconPath": "/assets/images/tab-bar/2-2.png"
      },
      {
        "pagePath": "/pages/index3/index",
        "text": "",
        "iconPath": "/assets/images/tab-bar/3.png",
        "selectedIconPath": "/assets/images/tab-bar/3-3.png"
      },
      {
        "pagePath": "/pages/user/index",
        "text": "",
        "iconPath": "/assets/images/tab-bar/4.png",
        "selectedIconPath": "/assets/images/tab-bar/44.png"
      }
    ]
  },
  attached() {
  },
  methods: {
    switchTab(e) {
      let self = this;
      const data = e.currentTarget.dataset
      const url = data.path
      console.log(data.index)
      wx.switchTab({
        url,
        success:function() {
          //debugger;
          console.log(data.index)
          self.setData({
            selected: data.index
          })
        }})
    }
  }
  
})
<!--miniprogram/custom-tab-bar/index.wxml-->
<cover-view class="tab-bar" style="{{showFlag}}">
  <cover-view class="tab-bar-border"></cover-view>
  <cover-view wx:for="{{list}}" wx:key="index" class="tab-bar-item" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <cover-image src="{{selected === index ? item.selectedIconPath : item.iconPath}}"></cover-image>
    <cover-view style="color: {{selected === index ? selectedColor : color}}">{{item.text}}</cover-view>
  </cover-view>
</cover-view>

2、第二个问题

一个页面只能由一个page,或者是Component,详细看

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

pageLifetimes: {
    show() {
      if (typeof this.getTabBar === 'function' &&
        this.getTabBar()) {
        this.getTabBar().setData({
          selected: 1,
          showFlag:""
        })
      }
    }
  }

 

renjunjie
粉丝 3
博文 4
码字总数 1222
作品 0
郑州
部门经理
私信 提问
加载中
请先登录后再评论。
记一次失败的Perl + Nginx + FastCGI 配置过程

这两天心血来潮,不知道为什么和 Perl + Nginx + FastCGI 配置 耗上了。但是失败了,记录如下: 1)安装Nginx 1.4.3 ,我的是WINDOWS 7 系统,修改配置文件如下: location ~ .(pl|cgi|perl)?...

通吃岛-低手哥
2013/10/27
1.5K
7
自定义表单系统--FormDesign

是基于 FLEX 开发的一款B/S的自定义表单系统 整个过程如下: 1、通过FormDesign自定义表单画出相应的表单; 2、将生成好的XML放到程序中,并通过后台自动编译成JSP; 注:FormDesing只是自定...

polliwog
2013/03/29
1.6W
1
词典软件--DictForGeeks

DictForGeeks是个人写的一款词典软件,支持高度自定义。个人在学习过程中,发现很多科技词汇的意思跟主流的词义很不一样就想写一款可以自己定义词义的词典,支持添加和查询功能。至少要比txt...

卓尔
2013/03/30
1K
0
cgi模式 web服务器--LiuGinx

liugnix是一个 cgi模式 web服务器。 支持语言 因使用的为CGI 模式,支持所有cgi模式运行的程序。 php python go perl 如何运行 cd mywebsite liugnix_ENV liuginx --help2013/05/07 01:10:43...

Able
2013/05/07
872
0
VCTransitionsLibrary –自定义iOS交互式转场动画的库

简介 VCTransitionsLibrary 提供了许多适用于入栈,出栈,模态等场景下控制器切换时的转场动画.它本身提供了一个定义好的转场动画库,你可以拖到自己工程中直接使用;也提供了许多拥有不同转场动...

ios122
2015/08/27
2.9K
0

没有更多内容

加载失败,请刷新页面

加载更多

IntelliJ IDEA简介及jetbrains-agent安装教程

IDEA 全称 IntelliJ IDEA,是java编程语言开发的集成环境。IntelliJ在业界被公认为最好的java开发工具,尤其在智能代码助手、代码自动提示、重构、JavaEE支持、各类版本工具(git、svn等)、J...

osc_mxz6aybo
2分钟前
0
0
Arraylist翻译分析

public class ArrayList<E> extends AbstractList<E> implements List<E>, RandomAccess, Cloneable, java.io.Serializable { //序列号UID,代表版本,私有的静态常量 private static final......

osc_bgpugm2v
4分钟前
0
0
深入分析序列化和反序列化原理,终于知道serialVersionUID到底有什么用了

深入序列化和反序列化原理 一个问题引发的思考 什么是序列化和反序列化 为什么需要序列化 序列化的方式 Java序列化 serialVersionUID的作用 serialVersionUID的两种表现形式 Transient关键字...

osc_sw1y4qdg
4分钟前
0
0
039. Nginx 负载均衡

1. 基于反向代理的功能,Nginx 作为负载均衡主要有以下几点理由: 高并发连接。 采用 epoll nio 的形式。 内存消耗少。 使用了大量自带的数据结构(自己设计的)。 数据拷贝采用类零拷贝的形式...

华夏紫穹
5分钟前
0
0
线程的基本概念和线程的使用方法

线程的基本概念 很多人会对程序、进程和线程之间理解比较含糊,在此先给出三者的概念: 程序:是一个指令的集合,意思就是我们为了完成特定的功能而编写的代码。 进程:是指程序的一次静态态执...

osc_t46alvdj
6分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部