vant list 加载列表 下拉加载数据 无痕加载

功能：滑动下拉一直加载

后端接口：列表是分页的模式，需要传入page(当前页码),pagesize(每页返回数据)

效果图

html

 <van-list v-model="loading" :finished="finished" :finished-text="`查询到 ${showList.length} 条信息`" @load="getMessageListFun">
        <div class="items" v-for="(item ,i ) in showList" :key="i">
          <!-- 通知类 -->
          <div class="msg_item text" v-if="item.bizType==(2 || 4)">
            <div class="msg_title flex">
              <div v-show="!item.readFlag" class="unread"></div>
              <div class="value" v-html="item.content"></div>
            </div>
            <div class="msg_foot flex">
              <span class="time">{{item.sendTime}}</span>
              <div class="flex">
                <span>{{!item.readFlag?'未读':'已读'}}</span>
              </div>
            </div>
          </div>
        </div>
      </van-list>

less

.page_home {
  min-height: 100%;
}

.msg_list {
  padding: 0 15px 20px 15px;
}

.msg_item.text {
  .value {
    margin-bottom: 10px;
    font-size: 14px;
    font-weight: normal;
  }
}

.msg_foot {
  border-top: 1px solid #f8f8f8;
  padding-top: 12px;
  color: #999;

  .time {
    flex: 1;
  }
}

.msg_body {
  margin: 10px 0;
  align-items: flex-start;

  .icon {
    width: 50px;
    min-width: 50px;
    height: 50px;
    background-color: #f4f4f4;
    border-radius: 6px;
    font-size: 28px;
    font-weight: bold;
  }

  .desc {
    margin-left: 10px;
    color: #5f5f5f;
    -webkit-line-clamp: 3;
    flex: 1;
  }
}

.msg_item {
  background-color: #fff;
  border-radius: 6px;
  padding: 12px 20px;
  position: relative;
  margin-bottom: 15px;

  &:active {
    background-color: #eff0f4;
  }
}

.msg_title {
  font-weight: bold;
  align-items: flex-start;
  font-size: 16px;

  .unread {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #eb3333;
    margin: 8px 10px 0 0;
  }

  .value {
    flex: 1;
  }
}

.filter {
  background-color: #eff0f4;
  height: 46px;
  width: 80px;
  margin-left: 15px;
  font-weight: bold;
  border-radius: 4px;
  line-height: 1;

  .van-icon {
    font-size: 16px;
    margin-right: 5px;
  }
}

.status_bar {
  margin: 15px;

  .bg_block {
    background-color: #5177f4;
    width: calc(33.33% - 2.6px);
    height: 38px;
    border-radius: 4px;
    transition: all 0.5s ease;
    position: absolute;
    left: 0;
    top: 4px;
    left: 4px;
    z-index: 1;
  }
  .status {
    height: 46px;
    padding: 4px;
    background-color: #eff0f4;
    border-radius: 4px;
    flex: 1;
    position: relative;

    .actived {
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      border-right: none !important;
      transition: all 0.2s ease;

      & > span {
        position: relative;
        z-index: 2;
      }
    }
  }

  .status > div {
    flex: 1;
    text-align: center;
    color: #6c6c71;
  }
}

js

 data() {
    return {
      loading: false,//是否在调用接口获取数据
      finished: false,//是否查询完数据
      statusArr: [
        { id: null, name: "全部" },
        { id: 0, name: "未阅" },
        { id: 1, name: "已阅" },
      ],
      status: 0, //0-全部 2-未阅 1-已阅
      typeStatus: null, //接口传：全部：null 0未读，1已读
      // 业务消息类别 1.流程类，2.通知类，3.日常事务性办理，4.正常沟通消息,5催办
      typeList: [
        { id: 1, mc: "流程" },
        { id: 2, mc: "通知" },
        { id: 3, mc: "日常事务性办理" },
        { id: 4, mc: "正常沟通消息" },
        { id: 5, mc: "催办" },
      ],
      typeIndex: 1,
      showList: [],//接口获得列表
      listType: null, //消息体类型，不传：全部 1.文本。2 图片，3 图文，4 文件
      page: 1,
    };
  },

 // 更换已读未读
    changeStatus(index, status) {
      this.status = index;
      this.typeStatus = status;
      this.resetList();
      this.getMessageListFun();
    },
    // 更换消息类型
    changeType(index) {
      this.typeIndex = index;
      this.resetList();
      this.getMessageListFun();
    },
    resetList() {
      this.page = 1;
      this.showList = [];
    },
    //     getMessageListFun(info) {
      if (!(Number(this.userInfo.id) > 0)) return;
      // readFlag:0未读，1已读。type:1.文本。2 图片，3 图文，4 文件。bizType业务消息类别 1.流程类，2.通知类，3.日常事务性办理，4.正常沟通消息,5催办
      let requestInfo = Object.assign(
        {
          userid: this.userInfo.id,//登录人的id
          page: this.page,//要传的页码，获取一次接口+1
          size: 10,
          bizType: this.typeIndex + 1,
        },
        this.typeStatus != null ? { readFlag: this.typeStatus } : {},
        this.listType != null ? { type: this.listType } : {},
        info
      );
      //这边控制只有当第一次加载的时候才需要显示加载图标，下滑的时候不显示
      if (this.showList.length < 1) showToast("请稍等", { type: "loading" });
      this.loading = true;
      getList(requestInfo)
        .then((res) => {
          this.$toast.clear();
          this.loading = false;
          if (res.errcode != 0) {
            this.finished = true;
            showToast(res.errmsg, { type: "fail", duration: 300 });
            return;
          }
          this.$toast.clear();
          if (res.data.length < 10) {
            this.finished = true;
          }

          this.showList = [...this.showList, ...res.data];
          this.page++;
        })
        .catch((err) => {
          this.$toast.clear();
          this.finished = true;
          showDialog(err);
        });
    },

问题：
1：页面调用获取第一页的数据接口两次
原因： 页面在create就调用了一次获取列表函数，list组件一开始生成的时候，页面空白，会自动执行@load方法，而page+1是等到接口返回数据才会执行，于是出现调用了两次函数的情况
解决：:immediate-check=“false” 写在组件上，开始调用接口的时候this.loading=true，接口调用失败，或者返回的数据长度小于this.pageSize(也就代表当前是最后一页)，this.finished = true;