一、小程序自定义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 较高的用户留存率方面扮演着重要的角色。通过本文总结应该能够为小程序开发者提供了一些帮助和思考。
