zoukankan      html  css  js  c++  java
  • 分页组件


    function ViewMore({ hasMore, request, cursor, list }) {
      function handleOnAppear() {
        if (!hasMore) {
          return;
        }
        request(cursor);
      }
      return (
        <View className="view-more" onAppear={handleOnAppear}>
          {hasMore ? (
            <View className="view-more-tip">下拉获取更多</View>
          ) : list.length ? (
            <View className="view-more-tip">
              <View className="view-more-line"></View>
              没有更多了
              <View className="view-more-line"></View>
            </View>
          ) : (
            <View />
          )}
        </View>
      );
    }
    
    const DefaultEmptyComponent = (props) => <View className="page-content-empty"></View>;    //兜底展示
    
    
     interface IProps { fetchData: any; params: any; [key: string]: any; } const defaultParams = { pageSize: 10, }; function WithPageList(PageItem, EmptyComponent = DefaultEmptyComponent) { return class HOC extends Component<IProps> { state = { list: [], loading: true, cursor: 1, hasMore: true, } componentDidMount() { const { cursor } = this.state; this.fetchData(cursor); } render() { const { list, hasMore, cursor } = this.state; const { fetchData, params, ...leftProps } = this.props; if (!list || !list.length) { return ( <View className="page-content"> <EmptyComponent /> </View>  ); } return ( <View className="page-content"> <View className="page-list"> {list.map((item, index) => ( <PageItem key={index} data={item} {...leftProps} />  ))} </View> {list.length > 0 &&(<ViewMore hasMore={hasMore} cursor={cursor} request={this.fetchData} list={list} />)} </View>  ); } fetchData = async (cursor) => { const { fetchData, params } = this.props; const { list } = this.state; try { const data = await fetchData({ ...defaultParams, ...params, currentPage: cursor, }); this.setState({ loading: false, hasMore: data.hasMore, list: [...list, ...data.list], cursor: cursor + 1, }); } catch (err) { this.setState({ loading: false, hasMore: false, }); } } } } export default WithPageList;





    调用部分:
    const List = WithPageList(<View 
    fetchData={RecordService.getPKList}//调用的接口 params={params}//传入的参数
    >这里写循环组件的东西</View>); //调用
     
     
     
     
  • 相关阅读:
    PHP 日志专题
    ThinkPHP 3.2 用户注册邮箱验证帐号找回密码
    ThinkPHP 3.2 用户注册邮箱验证激活帐号
    ThinkPHP 3.2 vendor()方法的深入研究及Phpqrcode的正确扩展
    基于Composer的Laravel扩展包开发工作流
    如何利用showdoc自动生成API文档
    PHP中的几个随机数生成函数
    isset在php5.6-和php7.0+的一些差异
    PHP学习方向-进阶2(三)
    Jupyter Notebook 下安装 PHP 内核
  • 原文地址:https://www.cnblogs.com/yujiawen/p/15337367.html
Copyright © 2011-2022 走看看