微信小程序自定义tabBar的步骤记录

目录
  • 1、前言
  • 2、自定义tabBar样式
  • 3、引入custom-tab-bar及相关配置
  • 4、完整Demo
  • 总结

1、前言

很多时候，小程序自带的tabBar不能够满足项目需求，这个时候就需要我们自定义tabBar了。但是在网上找了很久，基本都是存在切换时闪烁的问题。幸运的是从基础库2.5.0开始，可以官方使用自定义tabBar了。

2、自定义tabBar样式

如下图所示，我们需要一个展示“首页”、“我的”，和一个可以点击跳转到发布的tabBar。这种样式，原生的就无法满足需求了，只能自定义tabBar了。

3、引入custom-tab-bar及相关配置

3.1、如下图所示，将custom-tab-bar【下载】导入项目根目录，

3.2、在app.json中配置好切换的tabbar，并设置"custom": true，然后将基础库设置成2.5.0

3.3、使用自定义TabBar，在切换的TabBar界面的onShow中添加如下代码。如首页中设置 selected: 0，我的中设置 selected: 2。因为 selected: 1 是特殊跳转，点击加号图标时，不再是切换tabbar，而是直接跳转发布界面了。

/**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    if (typeof this.getTabBar === 'function' &&
      this.getTabBar()) {
      console.log('设置选中项 0')
      this.getTabBar().setData({
        selected: 0
      })
    }
  },

4、完整Demo

真机测试可用，使用也非常的简单。【完整Demo下载地址】

总结

到此这篇关于微信小程序如何自定义tabBar的文章就介绍到这了,更多相关小程序自定义tabBar内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 微信小程序自定义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=&

  • 微信小程序开发之自定义tabBar的实现

    最近开发微信小程序,公司要求做一个类似闲鱼的tabbar,但是网上大多资料的tabbar都会在页面切换的时候重新渲染,所以我写了一个不会重新渲染的tabbar,有需要的直接拿走不谢.https://github.com/SuRuiGit/wxapp-customTabbar 在小程序的开发文档中,对tabbar是这样说明的: 如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页

  • 微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

    微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例

    本文实例讲述了微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能.分享给大家供大家参考,具体如下: 顶部滚动选项卡 话不多说,直接上代码 pages/home/home.wxml <scroll-view scroll-x="true" style='width: 100%; white-space:nowrap; '> <!-- tab --> <view class="tab"> <view class=&qu

  • 微信小程序自定义菜单切换栏tabbar组件代码实例

    微信小程序自定义菜单切换栏tabbar组件代码实例

    这篇文章主要介绍了微信小程序自定义菜单切换栏tabbar组件代码实例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 效果图: wxml代码: <view class="top_tabbar" > <block wx:for="{{itemName}}" wx:key="{{index}}"> <view class="item_name {{tabInde

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

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

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

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

    引言:此方法可用作大部分微信小程序支持,但uni-app文档中却找不到相关说明的API 需求 需要在微信小程序中,实现一个中间图标突出显示的异形导航栏. 如下图 实现方法设计 要做这种异形的导航栏,用直接在配置文件里面写list的方法肯定做不到.那么,就有以下两种可替代方法. 在每一个页面都加载一个tabBar组件,与页面同时渲染. 设置自定义tabBar,修改tabBar的样式. 优缺点分析:方法1实现起来略为简单,但是会出现代码可重用率低,降低性能,已经界面跳动等问题.方法2则是微信官方提供

  • 如何自定义微信小程序tabbar上边框的颜色

    如何自定义微信小程序tabbar上边框的颜色

    我们知道tabbar上边框的颜色是通过 tabBar 的 borderStyle 属性设置的,只支持两个值 black / white,参见文档 tabBar 示例,红色 解决办法 其实很简单,自己画一条线定位在页面最底部就可以了,我们可以利用小程序类似于网页 <html> 标签的 <page>标签,在全局样式中加入如下: app.wxss page::before{ content: ''; position: fixed; left: 0; top: 0; width: 100

  • 微信小程序官方动态自定义底部tabBar的例子

    最近在做小程序的项目,由于用户需求在进入页面时进行选则角色,然后再进入小程序,这时看到的底部菜单看到的不一样,而我们都知道原生的tabBar是不支持这种做法的.在网上搜集了海量资料后发现无非两种解决方法:1.是建立模板,可是会有不能忍受的抖动:2.是利用小程序的组件开发:但是项目已经进行了一般,不可能再进行大的改变: 怎么办呢?? 无意在一条评论中发现说微信官方已经提供该组件,于是在小程序文档中寻找很久才在一个犄角旮旯找到:地址链接. 先看效果图: 1.首先看一下官方用法 这是几个非常重要你需要

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

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

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

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

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

随机推荐