微信小程序> 小程序自定义tabBar

小程序自定义tabBar

浏览量:6513 时间: 来源:帅气的铅笔

目录

  • 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下载地址】

本人公众号,关注一波,共同交流吧。
小程序

版权声明

即速应用倡导尊重与保护知识产权。如发现本站文章存在版权问题,烦请提供版权疑问、身份证明、版权证明、联系方式等发邮件至197452366@qq.com ,我们将及时处理。本站文章仅作分享交流用途,作者观点不等同于即速应用观点。用户与作者的任何交易与本站无关,请知悉。

产品经理

手机 : 13312967497

擅长 : 小程序流量变现

扫码领取礼包

热门模板

  • 头条
  • 搜狐
  • 微博
  • 百家
  • 一点资讯
  • 知乎