菜鸟求救 <uni-list>上拉加载更多怎么做

<template>
<view class="work-container" style="width: 99%;">

<!-- 轮播图 -->  
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">  
  <swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">  
    <swiper-item v-for="(item, index) in data" :key="index">  
      <view class="swiper-item" @click="clickBannerItem(item)">  
        <image :src="item.imgUrl" mode="aspectFill" :draggable="false" />  
      </view>  
    </swiper-item>  
  </swiper>  
</uni-swiper-dot>  

<uni-section title="设备信息" type="line" padding>  
  <uni-list>  
    <uni-list :border="true">  
      <!-- 头像显示角标 -->  
      <view v-for="(item, index) in devices" :key="index">  
        <uni-list-chat  
            :title="item.devStatus === 'start' ? '生产':'关机'"  
            :avatar="item.imgUrl"  
            :note="item.code"  
            :time="item.onlineStatus ===0?'离线':'在线'"  
            :badgeText="'产量：'+(item.devGoods>0 ? item.devGoods:'0')"  
            clickable  
            @click="handleTableRowClick(item.code)"  
        >  
        </uni-list-chat>  
      </view>  
    </uni-list>  
  </uni-list>  
</uni-section>  

<!-- 添加加载提示 -->  
<view class="loading-text" v-if="loading">  
  正在加载更多...  
</view>  
<view class="loading-text" v-else-if="devices.length >= total && total > 0">  
  没有更多数据了  
</view>  

</view>  

</template>

<script>
import { getDeviceDataList } from '@/api/app/device.js'
import { listBanner } from '@/api/app/banner.js'

export default {
data() {
return {
devices: [], // 存储设备数据的数组
data: [],
current: 0,
swiperDotIndex: 0,
queryParams: {
pageNum: 1,
pageSize: 10,
},
total: 0, // 添加总数据量
loading: false, // 添加加载状态
avatarList: [{
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}, {
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}, {
url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/unicloudlogo.png'
}]
}
},
onLoad: function() {
this.loadMoreData(this.queryParams)
this.loadMoreDataBanner()
//加载下拉刷新功能
setTimeout(function () {

    }, 1000);  
    uni.startPullDownRefresh();  
},  
onPullDownRefresh() {  
    this.loadMoreData(this.queryParams)  
    setTimeout(function () {  
        uni.stopPullDownRefresh();  
    }, 1000);  
},  
onShow: function() {  
    this.loadMoreData(this.queryParams)  
},  
created() {  

},  

methods: {
// 修改加载更多数据的方法
loadMoreData(queryParams, isLoadMore = false) {
if (!isLoadMore) {
this.devices = []; // 首次加载清空数据
this.queryParams.pageNum = 1;
}

  this.loading = true;  
  getDeviceDataList(queryParams).then(res => {  
    if (isLoadMore) {  
      this.devices = [...this.devices, ...res.rows]; // 追加数据  
    } else {  
      this.devices = res.rows; // 替换数据  
    }  
    this.total = res.total;  
    this.loading = false;  
  }).catch(() => {  
    this.loading = false;  
  });  
},  
loadMoreDataBanner() {  
  listBanner().then(res => {  
    this.data = res.data  
  })  
},  
clickBannerItem(item) {  
  // console.log("11111111111111111-----------",item);  
},  
changeSwiper(e) {  
  this.current = e.detail.current  
},  
// 处理表格行点击事件  
handleTableRowClick(item) {  
  // console.log("11111111111111111-----------");  
  // 在这里编写逻辑来导航到新页面  
  // 例如，使用 uni.navigateTo 方法  
  uni.navigateTo({  
    url: '/pages/device/deviceDetails?deviceCode=' + item  
  })  
},  

},
}
</script>

<style lang="scss">
/ #ifndef APP-NVUE /
page {
display: flex;
flex-direction: column;
box-sizing: border-box;
background-color: #fff;
min-height: 100%;
height: auto;
}

view {
font-size: 14px;
line-height: inherit;
}

/ #endif /

.text {
text-align: center;
font-size: 26rpx;
margin-top: 10rpx;
}

.grid-item-box {
flex: 1;
/ #ifndef APP-NVUE /
display: flex;
/ #endif /
flex-direction: column;
align-items: center;
justify-content: center;
padding: 15px 0;
}

.uni-margin-wrap {
width: 690rpx;
width: 100%;
;
}

.swiper {
height: 300rpx;
}

.swiper-box {
height: 150px;
}

.swiper-item {
/ #ifndef APP-NVUE /
display: flex;
/ #endif /
flex-direction: column;
justify-content: center;
align-items: center;
color: #fff;
height: 300rpx;
line-height: 300rpx;
}

@media screen and (min-width: 500px) {
.uni-swiper-dot-box {
width: 400px;
/ #ifndef APP-NVUE /
margin: 0 auto;
/ #endif /
margin-top: 8px;
}

.image {  
  width: 100%;  
}  

}

.chat-custom-right {
flex: 1;
/ #ifndef APP-NVUE /
display: flex;
/ #endif /
flex-direction: column;
justify-content: space-between;
align-items: flex-end;
}

.chat-custom-text {
font-size: 12px;
color: #999;
}

.loading-text {
text-align: center;
padding: 15px 0;
font-size: 14px;
color: #999;
}

</style>