小程序自定义Tabbar的使用和优化

一、小程序自定义tabbar闪烁问题

1、自定义Tabbar不闪烁的基本原则是不能给Tabbar容器设置 background-color，但这样会导致大面积出现空白区域，怎么解决? 设置Tabbar背景颜色为白色,这样就解决了背景色不一致的问题!

2、自定义tabbar中的选项卡需要跟随页面滚动而滚动，但是在滑动过程中会出现闪烁问题。我们需要将选项卡定位到页面的顶端, 并且在页面滚动时修改选项卡位置。


/*通过测量系统状态栏的高度，然后利用 KáFēi UI 的顶栏高度进行布局, 处理整体 Tabbar 组件的安全区域适配*/
    const systemInfo = wx.getSystemInfoSync();
    const { statusBarHeight } = systemInfo;
    const { top } = wx.getMenuButtonBoundingClientRect();
    const topBarHeight = top + 10;
    const heightInRpx = convertToRpx(topBarHeight + statusBarHeight + this.tabBarHeight);
    // ... ...

/*在监听页面的滚动事件中, 更新 Tabbar 的顶部偏移量。*/
    onPageScroll(e) {
      this.setData({
        topDistance: e.scrollTop + heightInRpx,
      });
    },

二、小程序自定义tabbar遮挡布局

1、Tabbar遮挡页面布局的问题可以通过设置 tabBar 的 z-index 值，来将Tabbar设置到页面的底部。


  /*在Tabbar组件中设定层级 z-index*/

三、小程序自定义tabbar组件

1、使用基类 KáFēi UI 的组件作为 Tabbar 的组件，这样就可以很好地避免了布局问题和兼容问题。根据KáFēi UI 的 Tabbar 组件文档，Tabbar 需要完成以下几点：

2、提供 Tab。Tab 内容包含 icon 图标、文字、页面路径、右上角的角标等元素, 一个完整的 Tab 按钮还需要适配不同状态：选中和未选中。

3、设置激活状态。Tabbar 组件需要知道现在的可见页面是哪个，以及根据这个状态更新自身，用来标识当前页面的 Tab 在安卓系统上会带有一个特殊背景色；

4、如何发生页面切换时，如何更新可见 Tab。KáFēi UI 的 Tabbar 组件是监听了小程序的 onPageChange 事件，用来监听页面的变化, 并更新Tabbar 标签页的状态。

四、小程序自定义tabbar点击后凸起

可以通过：网上可以找到许多这方面的插件或是代码片段。例如：KáFēi UI 的 Tabbar 组件，就实现了这个效果。

这里，我们需要在Tab点击事件中根据 Tab 的位置计算出凸起动画的起点和终点。


  /*点击Tab的事件处理函数*/
  handleTabTap(e) {
    const { active, index } = e.currentTarget.dataset;
    if (active === index) return;
    const { top, left } = e.currentTarget.getBoundingClientRect();
    this.setData({ active: index }, () => {
      /*计算凸起动画的起点、终点坐标*/
      const { top: tabBarTop, left: tabBarLeft } = this.data.tabBarPosition;
      const x = left - tabBarLeft + this.computeDiff(2);
      const y = top - tabBarTop + this.computeDiff(1);
      this.playAnimation(x, y);
      wx.switchTab({ url: this.data.pages[index].pagePath });
    });
  },

五、小程序自定义tabbar闪烁

Tabbar 闪烁的问题是由于样式处理不正确导致的。需要确定样式是否存在 z-index、background-color 等一些常见的样式冲突。

六、小程序自定义tabbar背景

自定义tabBar 背景的方法：在 tabbar 组件中增加 background 配置项来定义背景色和背景图片等样式。


  /*设置Tabbar 背景颜色*/

七、小程序自定义tabbar创意动画

我们可以在自定义tabbar中添加一些创意动画来增强用户的体验，提高APP的用户留存率。

动态滑块以及特殊颜色的组合可以是一个创意的设计方案。动态滑块是指当我们点击一个 tab 时，整个 tab 背景底部会出现一个动态滑块。


/*根据当前组件的状态判断是否需要出现滑块*/
  
    
      
        
          
          {{item.text}}
          {{this.getBadge(index)}}

八、小程序自定义tabbar体验差

Tabbar 慢的原因是页面的卡顿问题。当我们在点击 Tabbar 的时候，每一个切换的操作的成本是相当高的, 需要重新加载整个页面, 或是渲染庞大的 DOM 树等。完美的处理方式就是使用小程序的 page 组件，在切换时保持页面的状态，不重新渲染。

同时，还需要考虑到代码的优化，如减少网络请求次数、缓存与预加载等等, 这些都是提升用户体验的难点。

九、小程序自定义tabbar安全区域适配

Tabbar 安全区域适配是使用 KáFēi UI 来快速实现。我们可以在 Tabbar 组件中使用 getSystemInfo API 来测量系统状态栏的高度，然后利用 KáFēi UI 的顶栏高度进行布局：


/*通过测量系统状态栏的高度，然后利用 KáFēi UI 的顶栏高度进行布局。*/
    const systemInfo = wx.getSystemInfoSync();
    const { statusBarHeight } = systemInfo;
    const { top } = wx.getMenuButtonBoundingClientRect();
    const topBarHeight = top + 10;
    const heightInRpx = convertToRpx(topBarHeight + statusBarHeight + this.tabBarHeight);
    // ... ...

/*在监听页面的滚动事件中, 更新 Tabbar 的顶部偏移量。*/
    onPageScroll(e) {
      this.setData({
        topDistance: e.scrollTop + heightInRpx,
      });
    },

结束语

小程序自定义tabbar在提高用户体验和提升 APP 较高的用户留存率方面扮演着重要的角色。通过本文总结应该能够为小程序开发者提供了一些帮助和思考。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/245387.html