下拉加载更多在移动端和小程序中的不同处理方式

1.在移动端的处理方式:

<template>
<!-- 备注:van-list是引用了vant组件库里面的组件 -->
 <van-list>
     <!-- 订单列表循环渲染问诊订单的数据 -->
     <consult-item v-for="i in list" :key="i" />
 </van-list>
</template>

<script setup lang="ts">
   import { ref } from 'vue'
   import type {  ConsultOrderItem } from "../../../types/consult"
   import { ConsultType } from "../../../enums/index"
   // 引入订单接口
   import { getConsultOrderList } from "../../../api/consult"
    
   // 接收获取订单的类型数据
   const props = defineProps<{
     type:ConsultType
   }>()

  // 1.列表数据
  const list = ref<ConsultOrderItem[]>([])

  // 2.列表加载状态
  const loading = ref(false)

  // 3.列表是否加载完成: true加载完成 | false加载未完成
  const finished = ref(false)

 // 定义变量的参数(请求的分页参数)
 const params = {
  type:props.type,
  current:1,
  pageSize:10
 }

  
// 4.加载数据的方法--->默认页面加载会执行一次
const onLoad = async() => {
  // 异步更新数据
  const res = await getConsultOrderList(params)
  
  // 追加到列表中去
  list.value.push(...res.rows)

  // 加载状态结束
  loading.value = false
   
  // 数据全部加载完成
  if(list.value.length === res.total) {
    finished.value = true
  } else {
    // 数据没有加载完 把页码加一
    params.current++
  }
}
</script>

2.小程序方式的写法

  

wxml部分:

<view class="music-viode" wx:if="videoList">
    <block wx:for="{{ videoList }}" wx:key="id">
       <view>{{ item }}</view>
    </block>
</view>


js部分:
import { getTopMV } from "../../serivers/video" //引入的后端接口
  Page({
   //数据存储
   data: {
    videoList:[],
    offset:0,
    hasMore:true
   },
    
   //调用后台接口
   onLoad: function (options) {
    this.getTopMVList()
   
    },
    
   async getTopMVList() {
    const res = await getTopMV(this.data.offset)
    // 新数据和旧数据进行拼接
    const newVideoList = [ ...this.data.videoList , ...res.data ]
    this.setData({ videoList: newVideoList })
    this.data.offset = this.data.videoList.length
    this.data.hasMore = res.hasMore
   },

  /**
   * 下拉刷新
   */
  async onPullDownRefresh() {
    this.setData({ videoList:[] })
    this.data.offset = 0
    this.data.hasMore = true
    // 重新请求数据
    await this.getTopMVList()
    // 3.停止下拉刷新
    wx.stopPullDownRefresh()
   },

   /**
   *上拉加载更多
   */
  onReachBottom: function () {
    if(!this.data.hasMore) return
    this.getTopMVList()
    }
  })