vant ui中 PullRefresh and List

需求：展示（用户）账户的明细，需要懒加载和下拉刷新效果（List实现懒加载，PullRefresh实现下拉刷新）

html:

<van-pull-refresh v-model="isLoading" @refresh="onRefresh">

                  <van-list

                    v-model="loading"

                    :offset="300"

                    :finished="finished"

                    @load="onLoad"

                  >

                    <div class="blancetransation-alldetail-items" v-for='(item,index) in userblansedatalist'>

                        <div  class="blancetransation-alldetail-items-left">

                          <div class="blancetr transaclianbei1" v-if="item.status">收</div>

                          <div class="blancetr transaclianbei2" v-else>支</div>

                          <div class="blance-center-div">

                              <p class="blancetransation-expenditure">{{item.desc}}</p>

                              <p class="blancetransation-time">{{item.time}}</p>

                          </div>

                        </div>

                        <div class="blancetransation-alldetail-items-right">

                          <p class="blancetransation-amount">

                            <span v-if="item.status" style="color:#F74C4C">+{{item.amount}}元</span>

                            <span v-else style="color:#7CAAFF">-{{item.amount}}元</span>

                          </p>

                        </div>

                    </div>

                  </van-list>

              </van-pull-refresh>

js

onLoad() {

          // 异步更新数据

          setTimeout(() => {

            this.getblancedetail()

            // 加载状态结束

            this.loading = false;

          }, 500);

      },

      onRefresh () {

            this.blancecurrengpage = 0

            // this.pages = 1

            this.userblansedatalist = []

            // this.sendRequstForBuy()

            setTimeout(() => {

            this.userblansedatalist = []

            this.isLoading = false

            this.getblancedetail()

            }, 300)

        },

请求后台数据

if (this.blancecurrengpage!=0 && this.blancecurrengpage*7>=this.userblansedata.listCount) {
            return
        }
        this.blancecurrengpage = this.blancecurrengpage + 1
        
         this.postJsonRequest('/*******/api/json', {
            'method': '*****',
            'data':{
                "currPage":this.blancecurrengpage,
                "pageSize":7
            }
          }).then(respond => {
            console.log(respond)
            if (respond.status === 200) {
              if (respond.data.code === 200) {
                this.userblansedata = respond.data.result
                // this.userblansedatalist = respond.data.result.detailList

                this.userblansedatalist = this.userblansedatalist.concat(respond.data.result.detailList)
                console.log(this.userblansedatalist)

                // 数据全部加载完成  停止懒加载
                console.log(this.userblansedata.listCount)
                if (this.blancecurrengpage*7>=this.userblansedata.listCount) {
                   this.finished = true;
                   console.log('加载完成')
                }
                
              } else {
                console.log(respond.data.message)
                this.finished = true;
              }
            }else{
            console.log(respond.code)
            this.finished = true;
            }

          }
        )

总结：
1，List：在请求完后台所给的总条数，把finished设置为true；在调用接口的时候判断，如果已经显示完所有数据，就不调用接口；延迟的时间可以设置短一点，0.5s；offset属性，表示在距离底部多少像素的时候，开始加载数据；请求数据的页数，初始值为0；
2，PullRefresh：把请求的页码设置为0，需要遍历的数据设置为空,延迟的时间设置为0.2s