fork 自 eft-cool-taro-ui，感谢 EXE 大前端团队 去掉了除 page 外的其他组件

简介

基于 Taro 框架 v1.3.9 开发，为了简化页面布局，解决列表页面经常使用到的下拉刷新、加载更多、顶部和底部区域固定、内容区域自适应高度等问题。将页面分为 header、content、footer 三个部分，可以自由设置是否需要 header 和 footer，content 会根据 header 和 footer 调节高度占满屏幕。

组件开发中，可能涉及调整，需要留意最新修改

使用

首先，使用以下命令安装：

# yarn
$ yarn add @gyxiaoz/gm-taro-ui

# npm
$ npm i @gyxiaoz/gm-taro-ui --save

然后在 app.scss 引入样式：

@import "~@gyxiaoz/gm-taro-ui/style/index.scss";

最后在页面中使用：

import Taro, { Component } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";
import { EPage } from "@gyxiaoz/gm-taro-ui";

import "./app.scss";

export default class Index extends Component {
  config = {
    navigationBarTitleText: "首页"
  };

  constructor() {
    super();
    this.state = {
      noMore: false,
      hasMore: true,
      scrollTop: 0
    };
  }

  componentWillMount() {}

  componentDidMount() {
    Taro.eventCenter.trigger("ERefreshStart");
    // 模拟请求
    setTimeout(() => {
      Taro.eventCenter.trigger("ERefreshEnd");
      this.setState({
        hasMore: true
      });
    }, 1000);
  }

  componentWillUnmount() {}

  componentDidShow() {}

  componentDidHide() {}

  refresh = () => {
    this.setState({
      refreshStatus: 1
    });
    Taro.showToast({
      title: "刷新",
      icon: "none"
    });
    // 模拟请求
    setTimeout(() => {
      this.setState({
        refreshStatus: 2
      });
    }, Math.random() * 1000);
  };
  refreshLater = () => {
    setTimeout(() => {
      this.refresh();
    }, 1000);
  };

  loadMore = () => {
    setTimeout(() => {
      this.setState({
        hasMore: false,
        noMore: true
      });
    }, 1000);
  };

  openModel = () => {
    this.setState({
      open: true
    });
  };

  hideModal = () => {
    this.setState({
      open: false
    });
  };

  toTop = () => {
    this.setState({
      scrollTop: 0
    });
  };

  handleScrollEnd = e => {
    this.setState({
      scrollTop: e.detail.scrollTop
    });
  };

  goBack = () => {
    return true;
  };
  render() {
    const { noMore, hasMore, refreshStatus, open, scrollTop } = this.state;
    const header = <View className="header-container">header</View>;
    const footer = <View className="footer-container">footer</View>;
    const refresherConfig = {
      recoverTime: 300,
      refreshTime: 1000
    };
    return (
      <View>
        <EPage
          renderHeader={header}
          renderFooter={footer}
          onRefresh={this.refresh}
          onLoadMore={this.loadMore}
          noMore={noMore}
          hasMore={hasMore}
          hasMoreText="loading"
          refresherConfig={refresherConfig}
          refreshStatus={refreshStatus}
          scrollTop={scrollTop}
          onScrollEnd={this.handleScrollEnd}
        >
          <View className="main-container">
            <View> Content </View>
          </View>
        </EPage>
      </View>
    );
  }
}

props

| props | propTypes | 描述 | 默认值 | | ----------------- | --------- | ------------------------------ | ------------------------- | | className | string | 自定义样式名 | - | | renderHeader | element | 顶部元素 | - | | renderFooter | element | 底部元素 | - | | onRefresh | func | 下拉刷新回调函数 | - | | onLoadMore | func | 滚动到底部加载更多 | - | | onScroll | func | 滚动事件 | - | | scrollTop | number | 设置竖向滚动条位置 | 0 | | onScrollEnd | func | 滚动结束触发 | - | | hasMore | bool | 是否能够加载更多 | - | | noMore | bool | 显示没有更多 | - | | hasMoreText | string | 自定义加载更多文字 | '加载中' | | noMoreText | string | 自定义没有更多文字 | '没有更多了' | | refresherConfig | object | 设置加载动画效果 | 详见 refresherConfig 描述 | | refreshStatus | number | 刷新动画 1：刷新中 2：刷新完成 | - | | loadMoreThreshold | number | 滚动底部多少距离开始加载更多 | 100 |

refresherConfig

| 属性 | 类型 | 默认值 | 描述 | | ----------- | ------ | ---------------------------------- | ---------------------------------------------------------------------------- | | recoverTime | number | 300 | 回弹动画的时间 ms | | refreshTime | number | 500 | 刷新动画至少显示的时间 ms （用来展示刷新动画， refreshStatus 为 1 时不生效） | | threshold | number | 70 | 刷新的阈值（低于这个值的时候不执行刷新） | | maxHeight | number | 200 | 可拉动的最大高度 | | height | number | 60 | 刷新动画播放时占的高度 | | showText | bool | true | 显示文字 | | refreshText | array | ['下拉刷新', '释放刷新', '加载中'] | 刷新文字 | | disabled | bool | false | 禁用刷新 |

EPage 支持通过事件来显示和隐藏刷新动画：

Taro.eventCenter.trigger("ERefreshStart"); // 显示刷新
Taro.eventCenter.trigger("ERefreshEnd"); // 隐藏刷新