gm-taro-ui v1.0.0

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

简介

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

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

使用

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

# yarn
$ yarn add eft-cool-taro-ui

# npm
$ npm i eft-cool-taro-ui --save

然后在 app.scss 引入样式：

@import "~eft-cool-taro-ui/style/index.scss";

最后在页面中使用：

import Taro, { Component } from "@tarojs/taro";
import { View, Text } from "@tarojs/components";

import { EPage } from "../../components";

import "./index.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

refresherConfig

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

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