nml_mobile/src/components/RemoteList/index.vue

<script setup>
const props = defineProps({
  url: {
    type: String,
    required: true,
  },
  d: {
    type: Object,
    required: false,
  },
})

let page = 1

let loading = $ref(false)
let error = $ref(false)
let finished = $ref(false)
let refreshing = $ref(false)

let list = $ref([])

request({
  url: props.url,
  data: {
    page,
    ...props.d
  },
})


function onLoad() {
  console.log('onLoad');
  loading = true
  request({
    url: props.url,
    data: {
      page,
      ...props.d
    },
  }).then(res => {
    if (res.code === '0') {
      if (refreshing) {
        list = [];
        refreshing = false;
      }
      list = list.concat(res.data.page_data)
      loading = false
      page++
      if (res.data.page_now === res.data.total_page) {
        finished = true
      }
    } else {
      error = true
    }

  }).catch(err => {
    console.log(err)
  })

}

function onRefresh() {
  console.log('onRefresh');
  finished = false
  page = 1
  onLoad()
}
</script>

<template>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <van-list v-model:loading="loading" v-model:error="error" error-text="请求失败，点击重新加载" :finished="finished"
      finished-text="没有更多了" @load="onLoad" @click.stop>
      <template v-for="item in list">
        <slot :="item"></slot>
      </template>
    </van-list>
  </van-pull-refresh>

</template>