首页-文章列表 (二) 02-实现下拉刷新-PullRefresh 下拉刷新组件-获取数据、更新状态、消息提示、单页面补全

本文链接：https://blog.csdn.net/weixin_44867717/article/details/104545106

实现下拉刷新-PullRefresh 下拉刷新组件-获取数据、更新状态、消息提示、单页面补全

PullRefresh 下拉刷新组件：https://youzan.github.io/vant/#/zh-CN/pull-refresh

看好所刷新内容的区域

结构：src/views/home/index.vue

+<van-pull-refresh v-model="downLoading" @refresh="onRefresh" :success-text="refreshSuccessText">
  <van-list v-model="upLoading" :finished="finished" 
  finished-text="没有更多了" @load="onLoad">
    <van-cell-group>
      <van-cell v-for="item in articles" :key="item">{{item}}</van-cell>
    </van-cell-group>
  </van-list>
+</van-pull-refresh>

数据：

// 下拉刷新中 true- 刷新完成
downLoading: false,
// 有更新 文字提示
refreshSuccessText: ''

逻辑：

// 下拉刷新  触发函数
onRefresh () {
   // 获取数据 渲染列表  网络延时1秒
      window.setTimeout(() => {
        // 模拟获取了数据  (有数据，没有数据)
        const data = []
        // 把刷新中状态  刷新结束
        this.downLoading = false
        if (data.length) {
          // 替换 articles 数据
          this.articles = data
          // 把之前全部加载完毕的状态改成  没有全部加载完毕
          this.finished = false
          // 更新成功
          this.refreshSuccessText = '更新成功'
          // 防止加载的数据不够一屏  主动加载一次数据
          this.onLoad()
        } else {
          // 无数据 不做为
          this.refreshSuccessText = '暂无更新'
        }
      }, 1000)
}