vantui列表数据展示，上拉加载下一页，下拉刷新页面

太过爱你忘了你带给我的痛 2022-10-07 06:46 137阅读 0赞

**直接上代码：**

<div class="profly-layout">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" loosing-text="释放刷新" pulling-text="下拉刷新" success-text="刷新成功">
               <van-list
                  v-model="loading"
                  :finished="finished"
                  finished-text="没有更多啦"
                  offset="58"
                  :immediate-check="false"
                 @load="onLoad">
                  <div class="item" v-for="(item, index) in list" :key="index">
                    <p>{ {  index+1 }}</p>
                    <p>{ {  item.addtime }}</p>
                    <p>{ {  item.id }}</p>
                  </div>
               </van-list>
             </van-pull-refresh>
        </div>

js:

<script>
    
    import {  List, PullRefresh } from 'vant';
    export default { 
      data() { 
        return{ 
          list: [],
          loading: false, //上拉加载
          finished: false, //上拉加载完毕
          refreshing: false, //下拉刷新
          pageno: 1,
          pagesize:10, //分页条数
        }
      },
      components:{ 
        [List.name]: List,
        [PullRefresh.name]:PullRefresh,
      },
      created () { 
            
      },
      mounted(){ 
        	this.getData()
      },
      methods:{     
        onRefresh() {  //下拉刷新
             this.getData()
         },
         onLoad() {  //上拉加载下一页
           let data = { 
            sort:"addtime desc",
            pageno: this.pageno,
            pagesize: this.pagesize 
          }
             this.$axios.post("/syJdc/service/findRecord", data).then( res => { 
               let datas = res.data.queryResult
                this.list = this.list.concat(datas)
                 if (this.list.length < res.data.rowCount) { 
                    this.pageno++
                     this.loading = false
                }else{ 
                   this.finished = true
                     this.loading = true
                 }
             })
         },
        async getData() { 
          let data = { 
            sort:"addtime desc",
            pageno: this.pageno,
            pagesize: this.pagesize 
          }
          this.$axios.post("/syJdc/service/findRecord", data).then( res => { 
                 this.list = res.data.queryResult ;   //res.data.queryResult是列表集合
                 // rowCount 是后台返回的列表总条数
                 if(res.data.rowCount === this.list.length){ 
                     this.finished = true;
                 }else { 
                     this.finished = false;
                 }
                 this.pageno++;
                 this.refreshing = false;
                 this.loading = false;
             })   
        }
      }
        
    }
    </script>

css:

.profly-layout { 
      .item { 
        width: 100%;
        border: 1px solid blue;
        margin-bottom: 20px;
        text-align: center;
        line-height: 26px;
        box-sizing: border-box;
      }
    }

效果：  
![在这里插入图片描述][20210616170623290.png]  
**总结：在写样式的时候一定要注意留心观察请求，本人遇到过某些样式会导致页面疯狂请求数据，具体原因不详**

[20210616170623290.png]: /images/20221005/3461b2ba8d924d718f845a408ff2b426.png

发表评论取消回复

表情：

评论列表（有 0 条评论，137人围观）

还没有评论，来说两句吧...

相关阅读

相关上拉加载下拉刷新

老方法，先上效果图： ![1264306-20190925171702811-981213350.gif][] 1.加入下拉刷新上拉加载的依赖 1 //下拉刷新

一时失言乱红尘/ 2023年08月17日 17:09/ 0 赞/ 156 阅读

相关商品列表页面：功能点(tab切换、上拉加载、下拉刷新)

微信小程序–商品列表页面 > 包含功能点： > > tab切换–`自定义tabs组件` > 上拉加载更多和下拉刷新 > 如果后台没有图片，显示暂无图片

傷城~/ 2023年02月19日 13:28/ 0 赞/ 8 阅读

相关 php 上拉加载下拉刷新页面,上拉加载，下拉刷新（即分页功能）

Hello APP \contant\{ \} .ids\{ text-align: center; margin-bottom: 5px; border-bott

约定不等于承诺〃/ 2022年10月21日 12:53/ 0 赞/ 344 阅读

相关 vantui列表数据展示，上拉加载下一页，下拉刷新页面

直接上代码： <div class="profly-layout"> <van-pull-refresh v-model="refreshing" @

太过爱你忘了你带给我的痛/ 2022年10月07日 06:46/ 0 赞/ 138 阅读

相关 RecyclerView 下拉刷新和上拉加载

RecyclerView 下拉刷新和上拉加载 RecyclerView已经出来很久了，许许多多的项目都开始从ListView转战RecyclerView，那么，上拉加载和

小灰灰/ 2022年07月24日 04:05/ 0 赞/ 594 阅读

相关下拉刷新上拉加载

下拉刷新： ![Center][] ![Center 1][] ![Center 2][] 上划加载 ![Center 3][] ![C

约定不等于承诺〃/ 2022年07月17日 02:22/ 0 赞/ 365 阅读

相关列表组件flatList 上拉加载，下拉刷新

初始化项目 react-native init FasterList 运行项目 react-native run-android 从APP.js里跳转到一个页面，再从另

快来打我*/ 2022年05月23日 07:58/ 0 赞/ 305 阅读

相关 RecyclerView 上拉加载下拉刷新

RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout and

以你之姓@/ 2022年01月07日 12:13/ 0 赞/ 386 阅读

相关 mui上拉刷新下拉加载

废话不多说，直接上代码 1、容器  <div id="refreshContainer" class="mui-content m

Dear 丶/ 2021年09月15日 16:48/ 0 赞/ 457 阅读

相关 uniapp下拉刷新上拉加载

一、需求留言板主页，显示所有的留言信息，带有分页功能；上拉加载数据，下拉刷新数据二、代码 ![在这里插入图片描述][watermark_t

﹏ヽ暗。殇╰゛Y/ 2021年09月03日 04:51/ 0 赞/ 731 阅读