小程序点击tabBar回到顶部

tabBar回到顶部

import Taro, { Component } from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
import { debounce } from '@/utils/descriptor'; // 防抖
let isGoTop = false; // 是否点按回到顶部
let scrollTop = 0; // 页面scrollTop值

class Index extends Component {
  config = {
    navigationBarTitleText: '',
  };
  state = {};
  // onLoad
  componentWillMount() {}
  // onReady
  componentDidMount() {}
  // onShow
  componentDidShow() {
    isGoTop = false; //页面切换首次点按不触发回到顶部
  }
  // onHide
  componentDidHide() {}
  // onUnload
  componentWillUnmount() {}
  // https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
  @debounce(20)
  onPageScroll(e) {
    scrollTop = e.scrollTop;
    if (screenHeight * 3 < e.scrollTop) {
      isGoTop = true;
      Taro.setTabBarItem({
        index: 0,
        text: '回到顶部',
        iconPath: 'static/tabBar/top.png',
        selectedIconPath: 'static/tabBar/top-active.png',
      });
    } else {
      isGoTop = false;
      Taro.setTabBarItem({
        index: 0,
        text: '首页',
        iconPath: 'static/tabBar/index.png',
        selectedIconPath: 'static/tabBar/index-active.png',
      });
    }
    console.log(isGoTop, scrollTop);
  }
  onTabItemTap(e) {
    console.log(isGoTop, scrollTop);
    if (e.index == 0 && isGoTop) {
      Taro.pageScrollTo({
        scrollTop: 0,
        duration: 300,
      });
    }
    if (!isGoTop && screenHeight * 3 < scrollTop) {
      //页面切换首次点按不触发回到顶部
      isGoTop = true;
    }
  }
  render() {
    return <View className="index"></View>;
  }
}

export default Index;

 为了防止回到顶部静态资源无法copy的问题，需要修改一下编译配置

    // config/index.js
    // https://nervjs.github.io/taro/docs/config-detail.html#copy
    copy: {
        patterns: [
            {
                from:'src/static/tabBar',
                to:'dist/static/tabBar'
            }
        ],
        options: {
        }
    },