react-ant-design-mobile实现拉动刷新和加载更多
发布日期:2021-05-20 10:06:48 浏览次数:6 分类:技术文章

本文共 3616 字,大约阅读时间需要 12 分钟。

对于移动端APP来说,列表页拉动刷新和加载更多是非常普通的功能。

这里我就分享我实现的一些碎片代码。

拉动刷新

  • 对于拉动刷新,直接使用的是ant-design-mobile中的PullToRefresh 拉动刷新。

    按照官网的代码复制下来

    import {
    
      PullToRefresh, Button } from 'antd-mobile';function genData() {
       const dataArr = [];  for (let i = 0; i < 20; i++) {
     dataArr.push(i);  }  return dataArr;}class Demo extends React.Component {
       constructor(props) {
     super(props);
    this.state = {
       refreshing: false,
      down: true,
      height: document.documentElement.clientHeight,
      data: [],
    };  }  componentDidMount() {
     const hei = this.state.height - ReactDOM.findDOMNode(this.ptr).offsetTop;
    setTimeout(() => this.setState({
       height: hei,
      data: genData(),
    }), 0);  }  render() {
     return (

      
      
    damping={
     60}
    ref={
     el => this.ptr = el}
    style={
     {
       height: this.state.height,
      overflow: 'auto',
    }}
    indicator={
     this.state.down ? {
     } : {
      deactivate: '上拉可以刷新' }}
    direction={
     this.state.down ? 'down' : 'up'}
    refreshing={
     this.state.refreshing}
    onRefresh={
     () => {
       this.setState({
      refreshing: true });
      setTimeout(() => {
     this.setState({
      refreshing: false });
      }, 1000);
    }}
      >
    {
     this.state.data.map(i => (
      
     i} style={
     {
      textAlign: 'center', padding: 20 }}>
    {
     this.state.down ? 'pull down' : 'pull up'} {
     i}
      

    ))}
      
    );  }}ReactDOM.render( , mountNode);

    其实对于我们实现功能来说,可以去除掉用例的不必要代码(用例获取数据的方法),精简下来就是

    如果报错说找不到ReactDOM,

    则需要引入

    import ReactDOM from 'react-dom';
    import {
    
      PullToRefresh, Button } from 'antd-mobile';class Demo extends React.Component {
       constructor(props) {
     super(props);
    this.state = {
       refreshing: false,
      down: true,
      height: document.documentElement.clientHeight,
    };  }  componentDidMount() {
     const hei = this.state.height - ReactDOM.findDOMNode(this.ptr).offsetTop;
    setTimeout(() => this.setState({
       height: hei,
    }), 0);  }  render() {
     return (

      
    damping={
     60}
    ref={
     el => this.ptr = el}
    style={
     {
       height: this.state.height,
      overflow: 'auto',
    }}
    indicator={
     this.state.down ? {
     } : {
      deactivate: '上拉可以刷新' }}
    direction={
     this.state.down ? 'down' : 'up'}
    refreshing={
     this.state.refreshing}
    onRefresh={
     () => {
       this.setState({
      refreshing: true });
      setTimeout(() => {
     this.setState({
      refreshing: false }, () => {
    // ---------------------------- 写自己刷新的事件方法
      });
      }, 1000);
    }}
      >
      
    // -------------------放自己的页面布局代码

      
    );  }}ReactDOM.render( , mountNode);

    加载更多

    自定义一个数组用来存放页面数据,进行加载更多时候,将新旧数据一起存放进去再进行渲染即可。

    点击加载更多页数增加,判断当前页数是否小于总页数去判断是否需要显示加载更多…

    • 列出一些伪代码:存放数组

      this.setState({
      
         initClassDynamicsList: [...initClassDynamicsList, ...classDynamicsList],
      initCommentContentList: [...commentContentList, ...initCommentContentList]
        }, () => {
         if (pageIndex > 1) {
         (initClassDynamicsList || []).forEach((item) => {
       item.commentList.forEach((item2) => {
         commentIdList.push(item2.commentId)
        })
        accountIdList.push(item.teacherAccountId)
      })

      在这里插入图片描述

转载地址:https://blog.csdn.net/weixin_45416217/article/details/108758602 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:使用chromeinspect#devices调试WebView_APP页面
下一篇:ant-design输入框自动获取焦点

发表评论

最新留言

感谢大佬
[***.191.171.10]2022年08月11日 04时50分43秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章