vue列表通用模板解析（上拉更多下拉刷新）

ps: 对于前端来说，列表是最常见的，不管哪个项目，都离不开列表，所以当项目做多了的时候，会有自己的一套模式，下面我就把我的模式放上来，给你们看看。

技术：vue + vant（vue的ui框架）

<template>
  <div class="wrapper">
    <van-pull-refresh  v-model="isLoading" @refresh="getData(1)">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="list.length>0?'我已经到底了~':''"
        @load="getData"
        style="min-height:calc(100vh - 1rem);padding-top:0.01rem;"
        :immediate-check="false"
        :offset="20"
      >
        <div class="item" v-for="(item, index) in list" :key="index">

        </div>
        <div class="no" v-if="list.length == 0">
          <img src="./../../assets/images/kb.png" alt />
          <div>您暂时没有相关订单</div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { mapGetters,mapMutations } from "vuex";
export default {
  props: {},
  data() {
    return {
      list:[1,1,1,1], // 列表数据
      loading:false, // 上拉加载状态
      isLoading:false, // 下拉加载状态
      finished: true, // 是否加载完毕
      pageIndex: 0, // 页码
    }
  },
  computed: {
    ...mapGetters(["userInfo"])
  },
  methods: {
    getData(bool){ // 获取数据接口，设置了个bool，判断是否下拉刷新
       if (bool) this.pageIndex = 0;
       this.$commonPost({  // commonPost是我自己写的一个通用方法
          jydm: "flow_10026",
          flow_10026: {
            user_nbr: this.userInfo.nbr,
            page_index: 10 * this.pageIndex, // 从...开始
            num_per_page: 10 // 取10个
          }
        })
        .then(resp => {
          if (resp.resp_code == 0 && resp.resp_result == 0) {
            let arr = [];
            if (resp.record) { // 判断record节点
              if (resp.record.length > 0) {
                arr = resp.record;
              } else {
                arr.push(resp.record);
              }
            }
            this.list = (bool ? [] : this.list).concat(arr); // 合并list
            if (arr.length < 10) { // 获取的arr长度小于10，说明加载完了，否则，没加载完
              this.finished = true;
            } else {
              this.finished = false;
            }
            this.isLoading = false;
            this.loading = false;
            this.pageIndex += 1;
          } else {
            this.$toast({
              message: resp.resp_msg,
              duration: 2000
            });
          }
        })
        .catch(err => {
          this.$toast({
            message: err.message,
            duration: 2000
          });
        });
    }
  },
  created(){
    document.title = '排队中'
  }
}
</script>

<style scoped lang='less'>
.wrapper{
  width: 100vw;
  min-height: 100vh;
  background: #f5f5f5;
}
.no {
  margin: 0 auto 0;
  padding-top: 2rem;
  text-align: center;
  img {
    width: 3.64rem;
    height: 2.1rem;
    margin-bottom: 0.6rem;
  }
}
.item{
  width: 7.02rem;
  height: 3.82rem;
  background: #fff;
  border-radius: .16rem;
  margin: .24rem auto 0;
}
</style>

---

先记录下来，也算是为了自己，方便以后不用再写一次，直接copy.