当前位置： 移动技术网 > 科技>操作系统>windows > vant实现列表分页加载和下拉刷新

vant实现列表分页加载和下拉刷新

2020年08月10日  | 移动技术网科技  | 我要评论 
<template>
  <div class="hello">
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <div class="container">
        <div v-if='noData'>
          暂无数据
        </div>
        <template v-else>
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="- 没有更多了 -"
            @load="onLoad"
            :offset="130"
          >
            <div v-for="item in myList" :key="item.id">
              {{item.content}}
            </div>
          </van-list>
        </template>
      </div>
    </van-pull-refresh>
  </div>
</template>

<script>

import axios from 'axios'
export default {
  name: 'HelloWorld',
  data() {
    return {
      page: 1,
      loading: false, // 当loading为true时，转圈圈
      finished: false, // 数据是否请求结束，结束会先显示- 没有更多了 -
      myList:[],
      noData: false, // 如果没有数据，显示暂无数据
      isLoading:false // 下拉的加载图案
    }
  },
  methods: {
    getInfo () {
      axios.post('/info', {
        limit: 10, // 每页请求条数
        page: this.page // 请求的页面
      })
      .then(res => {
        // 当请求成功
        if (res.code === 0) { 
          this.loading = false
          this.myList = this.myList.concat(res.data)
          this.page++
          // 如果没有数据，显示暂无数据
          if (this.myList.length === 0 && this.page === 1) {
            this.noData = true
          }
          // 如果加载完毕，显示没有更多了
          if (res.data.length === 0) {
            this.finished = true
          }
        }
      })
      .catch(error => {
        console.log(error)
      });
    },
    // 列表加载
    onLoad () {
      setTimeout(() => {
        this.getInfo()
        this.loading = true
      }, 500)
    },
    onRefresh () {
      setTimeout(() => {
        // 重新初始化这些属性
        this.isLoading = false
        this.myList = []
        this.page = 1
        this.loading = false
        this.finished = false
        this.noData = false
        // 请求信息
        this.getInfo()
      }, 500)
    }
  }
}
</script>

本文地址：https://blog.csdn.net/lu6545311/article/details/107855954

您可能感兴趣的文章:

如对本文有疑问， 点击进行留言回复！！

相关文章:

验证码：
最近更新的文章
大家感兴趣的文章
移动技术网