vue实现上拉刷新下拉刷新加载

vue移动端

详情前往我的码云
参考

下拉刷新加载

!<template>
<!-- 使用vant组件来写下来刷新加载 -->
  <div>
    <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
      <div v-for="(item, index) in list" :key="index">
        <div @click="btn(item.id)">{{ item.title }}</div>
      </div>
    </van-list>
  </div>
</template>
<script>
import { GetCode } from "../api/index";
export default {
  data() {
    return {
      list: [],
      limit: 16,//代表每页数量
      page: 1,//代表页数
      total: 1000, //总数
      loading: false,//vant中的loading效果
      finished: false//代表滑到底总数
    };
  },
  created() {},
  methods: {
    onLoad() {
      this.page += 1;//依次递加1
      this.getmain();
    },
    btn(e) {
      console.log(e);
      this.$router.push({
        name: "homeList",
        params: {
          id: e
        }
      });
    },
    getmain() {
      let params = {//拿到对应的入参
        limit: this.limit,
        page: this.page
      };
      GetCode(params).then(res => {
          this.loading = true;//在请求时打开loading
          setTimeout(() => {//这个定时器可写可不写 这边是更好看到loading效果
            if (res.data.success === true) {//判断请求成功状态
            this.loading = false;//请求成功关闭loading效果
            this.list =this.page == 1 ? res.data.data : this.list.concat(res.data.data);
            // 以上是对应数据 如果页数为1 对应相对数据 否则每次加载后对应的页数数量添加到以上页数对应的请求
            this.total = this.total;//这个是对应的总数
            this.finished = this.list.length >= this.total;//这个判断当接口数据长度与总数相同不加载显示对应文字
          } else {
            this.finished = true;//错误loading打开
          }
          }, 800);
        })
        .catch(err => {
          this.loading = true;//错误loading打开
        });
    }
  }
};
</script>
<style lang="scss" scoped>
div {
  div {
    div {
      margin-top: 10px;
    }
  }
}
</style>

上拉刷新下拉加载

!<template>
  <div>
    <van-pull-refresh success-text="刷新成功" v-model="isLoading" @refresh="onRefresh">
      <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
        <div v-for="(item, index) in list" :key="index">
          <div @click="btn(item.id)">{{ item.title }}</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
  
</template>
<script>
import { GetCode } from "../api/index";
export default {
  data() {
    return {
      list: [],
      limit: 16, //代表每页数量
      page: 0, //代表页数
      total: 1000, //总数
      loading: false, //vant中的loading效果
      finished: false,
      count: 0,
      isLoading: false
    };
  },
  created() {},
  methods: {
    onLoad() {
      // 下拉刷新加载
      this.getmain();
    },
    btn(e) {
      console.log(e);
      this.$router.push({
        name: "homeList",
        params: {
          id: e
        }
      });
    },
    onRefresh() {
      // 上拉刷新
      setTimeout(() => {
        this.isLoading = false;
        this.page = 0;
        this.getmain();
        this.loading = false;
      }, 800);
    },
    getmain() {
      let params = {
        //拿到对应的入参
        limit: this.limit,
        page: this.page
      };
      GetCode(params)
        .then(res => {
          setTimeout(() => {
            this.total = this.total; //这个是总数
            this.list =
              this.page == 0 ? res.data.data : [...this.list, ...res.data.data];
              this.page++;
            this.finished = this.list.length >= this.total;
            this.loading = false;
          }, 800);
          if (this.page >= this.total) {
            this.finished = true;
            this.loading = false;
          }
        })
        .catch(err => {
          this.loading = true; //错误loading打开
        });
    }
  }
};
</script>
<style lang="scss" scoped>
div {
  div {
    div {
      margin-top: 10px;
    }
  }
}
</style>

vue3请看这个