Skip to content

上拉加载更多

vue
<script setup>
import {reactive, ref, getCurrentInstance} from 'vue'

import {onLoad, onShow, onReachBottom} from '@dcloudio/uni-app'

const {proxy} = getCurrentInstance()

const pageData = reactive({
  params: {
    page: 1,
  },
  list: [],
  isLoaded: false,
  isNoMore: false,
})

async function getData(isMore, callback) {
  const res = await proxy.$api.rechargeRecord(pageData.params)
  pageData.isLoaded = true
  if (res.status == 1) {
    let resdata = res.data
    if (isMore) {
      pageData.list = [...pageData.list, ...resdata.data]
    } else {
      pageData.list = resdata.data
    }
    if (resdata.last_page > pageData.params.page) {
      pageData.isNoMore = false
    } else {
      pageData.isNoMore = true
    }
  }
}

function initData() {
  pageData.params.page = 1
  getData()
}

function getMore() {
  if (pageData.isNoMore) return false
  pageData.params.page++
  getData(true)
}

onReachBottom(() => {
  getMore()
})

onLoad(() => {})
onShow(() => {
  initData()
})
</script>