vant list refresh 二次封装

组件：

<template>
  <div>
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :disabled="disabled" :style="fullScreen? 'min-height: 100vh;': ''">
      <van-list
        v-model="loading"
        :finished="finished"
        :finished-text="finishedText"
        error-text="请求失败，点击重新加载"
        @load="onLoad"
        :immediate-check="immeCheck"
      >
        <slot></slot>
        <div v-if="noData" class="no-data-cont" :class="noDataClass">
          <!-- 暂无数据图片展示 -->
          <img :src="noDateIcon" alt="">
          <p>{{searchInput ? '没有查询到任何内容':'- 暂无数据 -'}}</p>
        </div>
        <div slot="finished" class="finished-data">
          <p v-if="!noData">{{ finishedText }}</p>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
export default {
  props: {
    immeCheck: {
      type: Boolean,
      default: false
    },
    searchInput: {
      type: String,
      default: ''
    },
    fullScreen: { // 是否需要让下拉区域始终为全屏
      type:Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    },
    noDataClass: {
      type: String,
      default: ''
    },
    finishedText: {
      type: String,
      default: '没有更多了'
    }
  },
  data () {
    return {
      refreshing: false,
      loading: false,
      finished: false,
      noData: false,
      noDateIcon: require('@/assets/common/page-empty.png'),
      len: 0,
      total: 0
    }
  },
  methods: {
    // 刷新加载完成
    onRefreshSuc () {
      this.refreshing = false
      this.finished = false
    },
    onRefresh () {
      setTimeout(() => {
        this.$emit('onRefreshList')
      }, 500)
    },
    // true  false  是否全部加载完成
    // onLoadSuc (isOver) {
    //   this.loading = false
    //   this.finished = isOver
    // },
    // len  已加载数据  total 总数据
    onLoadSuc(len, total) {
      this.loading = false
      this.len = len
      this.total = Number(total)
      if (Number(total) > 0) {
        this.noData = false
        if (len < Number(total)) {
          this.finished = false
        } else {
          this.finished = true
        }
      } else {
        this.finished = true
        this.noData = true
      }
    },
    onLoad () {
      setTimeout(() => {
        if (this.len < this.total) {
          this.$emit('onLoadMore')
        } else {
          this.finished = true
        }
      }, 500)
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ .van-pull-refresh {
  // overflow: visible!important;
}
.data-none {
  font-size: .2rem;
  color: #888888;
  line-height: .4rem;
}
.finished-data {
  p:nth-child(2) {
    text-align: center;
    color: #969799;
    font-size: .28rem;
  }
}
.no-data-cont {
  // height: 4rem;
  min-height: 4rem;
  width: 100%;
  padding-top: 0.3rem;
  text-align: center;
  img {
    // display: block;
    // margin: 0 auto;
    display: inline-block;
    height: 3rem;
    width: 3rem;
  }
  p {
    text-align: center;
    color: #969799;
    font-size: .28rem;
  }
}
.no-h-data-cont {
  height: auto;
  img {
    display: block;
    margin: 0 auto;
    height: auto;
    width: auto;
  }
}
</style>

使用：

<template>
  <div>
    <div class="panel-title">
      <div class="left-avatar">
        <img :src="userInfo.avatar || defaultAvatar" alt="" />
        <span v-if="userInfo.gender == 1" class="gender-icon">
          <svg-icon icon-class="nan"></svg-icon>
        </span>
        <span v-if="userInfo.gender == 2" class="gender-icon">
          <svg-icon icon-class="ru"></svg-icon>
        </span>
      </div>
      <div class="left-info">
        <div class="nickname">
          <span>{{ userInfo.title || '-' }}</span>
        </div>
        <div class="info">
          <span>{{ userInfo.age || '-' }}岁</span>
          <span></span>
          <span>{{ userInfo.phone || '-' }}</span>
        </div>
      </div>
    </div>
    <LoadMore
      class="loadMore"
      key="ehbList"
      @onRefreshList="onRefreshList"
      @onLoadMore="onLoadMore"
      ref="loadMoreCont"
    >
      <div class="userItem" v-for="(item, index) in list" :key="index">
        <div class="item-top">
          <van-image
            class="item-top-left-avatar"
            round
            :src="item.customerHeadImg || defaultAvatar"
          />
          <p class="item-top-left-name">{{ item.customerName }}</p>
        </div>
        <div class="item-bottom">
          <div class="item-bottom-content">
            <span class="label">添加时间</span>
            <span class="value">2023-10-19 17:37:45</span>
          </div>
          <div class="item-bottom-content">
            <span class="label">所属部门</span>
            <span class="value">产品部、技术部、测试部共3个部门</span>
          </div>
        </div>
      </div>
    </LoadMore>
  </div>
</template>

<script>
import LoadMore from '@/components/loadMore/index'
export default {
  name: 'friends',
  components: {
    LoadMore
  },
  data() {
    return {
      userInfo: {},
      defaultAvatar: require('@/assets/qwGuide/headportrait.png'),
      pageNum: 1,
      pageSize: 10,
      list: [
        {
          customerName: '张三'
        },
        {
          customerName: '张三'
        },
        {
          customerName: '张三'
        },
        {
          customerName: '张三'
        },
        {
          customerName: '张三'
        },
        {
          customerName: '张三'
        }
      ]
    }
  },

  created() {
    // this.getList()
  },

  methods: {
    getList() {
      const params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      this.$toast.loading({
        message: '加载中...',
        forbidClick: true,
        duration: 0
      })
      // receiveRecordPageList(params).then(res => {
      //   this.$toast.clear()
      //   if (this.$refs.loadMoreCont) this.$refs.loadMoreCont.onRefreshSuc()
      //   if (this.pageNum == 1) {
      //     this.list = res.data.list || []
      //   } else {
      //     this.list = this.list.concat(res.data.list || [])
      //   }
      //   if (this.$refs.loadMoreCont) this.$refs.loadMoreCont.onLoadSuc(this.list.length, res.data.total)
      // }).catch(() => {
      //   this.$toast.clear()
      // })
    },
    onRefreshList() {
      this.pageNum = 1
      this.getList()
    },
    onLoadMore() {
      this.pageNum++
      this.getList()
    }
  }
}
</script>

<style lang="scss" scoped>
.panel-title {
  background: #ffffff;
  border-radius: 0px 0px 0.08rem 0.08rem;
  padding: 0.48rem 0.32rem 0.32rem;
  display: flex;
  align-items: center;
  .left-avatar {
    position: relative;
    width: 0.88rem;
    height: 0.88rem;
    margin-right: 0.16rem;

    img {
      width: 100%;
      height: 100%;
      border-radius: 50%;
    }

    .gender-icon {
      position: absolute;
      display: block;
      width: 0.28rem;
      height: 0.28rem;
      line-height: 0.28rem;
      bottom: 0;
      right: 0;
      border-radius: 50%;
      // background: #165DFF;
    }

    .boy-class {
      background: #165dff;
      border-radius: 50%;
    }

    .girl-class {
      background: #f77234;
    }
  }

  .left-info {
    height: 0.88rem;

    .nickname {
      display: flex;
      align-items: center;
      span {
        max-width: 2.56rem;
        font-size: 0.32rem;
        font-weight: 700;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }
      /deep/ .van-rate__item:not(:last-child) {
        padding-right: 0.04rem;
      }
    }

    .info {
      display: flex;
      align-items: center;
      font-size: 0.24rem;
      margin-top: 0.08rem;
      color: #c9cdd4;
      span:nth-child(2) {
        width: 1px;
        height: 0.24rem;
        background-color: #86909c;
        margin: 0 0.16rem;
      }
    }
  }
}

.loadMore {
  height: calc(100vh - 1.68rem);
  overflow: hidden;
  /deep/ {
    .van-pull-refresh {
      height: calc(100vh - 1.68rem)!important;
      overflow: auto;
    }
  }
}

.userItem {
  padding: 0.32rem;
  margin: 0.24rem;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 0.08rem;
  position: relative;
  .item-top {
    display: flex;
    align-items: center;
    gap: 0.16rem;
    margin-bottom: 0.24rem;
    .item-top-left-avatar {
      width: 0.64rem;
      height: 0.64rem;
      flex-shrink: 0;
    }
    .item-top-left-name {
      font-size: 0.32rem;
      line-height: 0.44rem;
      color: #1d2129;
      font-weight: 500;
    }
  }
  .item-bottom {
    display: flex;
    flex-direction: column;
    gap: 0.16rem;
    line-height: 0.32rem;
    font-size: 0.28rem;
    .item-bottom-content {
      display: flex;
      word-break: break-all;
      gap: 0.16rem;
    }
    .label {
      color: #86909c;
      width: 1.68rem;
      flex-shrink: 0;
    }
    .value {
      color: #4e5969;
    }
  }
}
</style>