vue vant-list 组件使用记录

html 

<template>
  <div class="integral_list">
    <van-nav-bar title="积分明细" left-text="返回" left-arrow @click-left="goBack" />
    <div class="list_content">
      <van-list
        v-if="list.length>0"
        :immediate-check="false"
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="getIntegralList"
      >
        <div class="list_item" v-for="(item,index) in list" :key="index">
          <div class="item_left">
            <h3>{{item.businessType | formatType}}</h3>
            <span>{{item.createTime}}</span>
          </div>
          <div class="item_right">
            <div class="integral">{{item.integral | formatIntergral}}</div>
          </div>
        </div>
      </van-list>
      <van-empty
        v-else
        class="custom-image"
        image="https://img.yzcdn.cn/vant/custom-empty-image.png"
        description="暂无数据"
      />
    </div>
  </div>
</template>

js

<script>
import { fetchIntegralList } from "@/api/api.js";
export default {
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      pageNum: 1,
      pageSize: 10,
    };
  },
  created() {
    //积分列表
    this.getIntegralList();
  },
  methods: {
    //请求数据
    async getIntegralList() {
      let toast = this.$toast.loading({
        mask: true,
        message: "加载中...",
      });
      const { pageNum, pageSize } = this;
      let params = {
        page: pageNum,
        pageSize,
        state: 1,
      };
      let res = await fetchIntegralList(params);
      console.log("返回积分数据", res);
      this.loading = false;
      toast.close();
      if (res.data && res.code == 0) {
        let list = (res.data && res.data.rows) || [];
        if (pageNum > 1) {
          this.list = [...this.list, ...list];
        } else {
          this.list = list;
        }
        // 如果当前页数 = 总页数，则已经没有数据
        if (res.data.pageNo == res.data.totalPages) {
          this.finished = true;
          this.loading = false;
          this.finishedText = "- 没有更多了-";
        }
        // 如果总页数大于当前页码，页码+1
        if (res.data.totalPages > this.pageNum) {
          this.pageNum++;
        }
      }
    },
    //返回上一页
    goBack() {
      this.$router.go(-1);
    },
  },
  filters: {
    formatType(val) {
      switch (val) {
        case 0:
          return "每日签到";
          break;
        case 1:
          return "问题";
          break;
        case 2:
          return "额外积分";
          break;
        case 3:
          return "商品兑换";
          break;
        default:
          "";
      }
    },
    formatIntergral(val){
        if(val>0){
            return `+${val}`
        }else{
            return val
        }
    }
  },
};
</script>

css

<style lang="less" scoped>
.integral_list {
  background: #fff;
  .list_content {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    height: 6.2rem;
    width: 100%;
    .van-list {
      padding: 0 0.2rem;
      .list_item {
        display: flex;
        align-items: center;
        padding: 0.15rem 0;
        border-bottom: 1px solid #e8e8e8;
        justify-content: space-between;
        .item_left {
          h3 {
            margin: 0;
            font-size: 14px;
          }
          span {
            font-size: 12px;
          }
        }
        .item_right {
          font-size: 20px;
          color: #00E4C2;
        }
      }
    }
  }
}
</style>