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

直接上代码：

<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;
  }
}

效果：

总结：在写样式的时候一定要注意留心观察请求，本人遇到过某些样式会导致页面疯狂请求数据，具体原因不详