帮小忙首页长列表滚动，tabbar变为去底部、去顶部的实现，以及分享我的一些思考介绍帮小忙工具箱小程序首页去顶部、去底部

1. 效果演示

演示图片

2. 我是怎么思考这个功能 刚开始是在右下角实现回到顶部的悬浮按钮，这种是很常见的思路。刚开始也是这么实现的。后面因为我经常更新工具，很多工具都放在底部，就想怎样方便去底部，因此就实现去底部。再后来我是想在首页加入分享的按钮，又想首页保持干净整洁，就想到融合在tabbar里。

3. 实现思路

首先监听页面滚动，跟上次滚动的距离判断，得出当前是向下还是先上滚动。
然后使用wx.setTabBarItem()改变tabbar图标和文案。
最后监听onTabItemTap事件，跳转到顶部还是底部。

4. 部分源码

// 页面滚动防抖，自己封装的函数，数值代表防抖间隔
 onPageScroll_200(e, scrollTop) {
    const { selTop, selBottom, def } = tabBarConfig;
    if (scrollTop < 380) {
      wx.setTabBarItem(def);
    } else {
      wx.setTabBarItem(scrollTop > this.lastScrollTop ? selBottom : selTop);
    }
    this.lastScrollTop = scrollTop;
  },
  
  // 监听tabbar点击
onTabItemTap(e) {
    if (e.text === "去顶部") {
      wx.pageScrollTo({
        scrollTop: 0,
      });
    } else if (e.text === "去底部") {
      wx.pageScrollTo({
        scrollTop: 99999,
      });
    }
  },
  
  // 页面隐藏时，把tabbar恢复默认状态
  onHide() {
    wx.setTabBarItem(tabBarConfig.def);
  },

全局配置文件

// tabbar配置
export const tabBarConfig = {
  def: {
    index: 0,
    text: "免费工具",
    selectedIconPath: "/images/index-sel.png",
  },
  selTop: {
    index: 0,
    text: "去顶部",
    selectedIconPath: "/images/to-top.png",
  },
  selBottom: {
    index: 0,
    text: "去底部",
    selectedIconPath: "/images/to-bottom.png",
  },
};