环境:使用的是uniapp uview-ui组件,uview 组件的导入成功后才能使用

uview-ui 到导入:
步骤1:先把该组件的包下载下来,复制到项目中如上图
步骤2:在main.js中引入
import uView from "uview-ui"; Vue.use(uView);
如下图:

第三步:在uni.scss中引入
@import 'uview-ui/theme.scss';

以上三个步骤弄好项目中就可以正常的使用uview-ui组件的标签了。再开始进入主题u-loadmore,的分页。代码如下:
<template>
<view class="wrap" >
<view class="item u-border-bottom"v-for="(item, index) in list" :key="index" >
<h1>{{item.foodName}}</h1>
</view>
<u-loadmore :status="status" :load-text="loadText" @loadmore="getmoreList()"/>
</view>
</template>
<script>
export default {
data() {
return {
status: 'loadmore',
list: 0,
pageNum: 1,
pageSize:10,
loadText: {
loadmore: '轻轻上拉加载更多...',
loading: '努力加载中...',
nomore: '没有更多了'
},
}
},
onLoad() {
this.getlist()
},
methods:{
getmoreList() {
this.status = 'loading';
setTimeout(() => {
this.pageSize += this.pageSize;
this.getlist();
}, 1000)
},
getlist(){
var websiteUrl = this.websiteUrl;
var token = uni.getStorageSync('token')
console.log("token",token)
uni.request({
url: websiteUrl + 'xxx/xxx/xxx',//写自己的后台数据接口(是分页接口)
header: {
'content-type': 'application/json',
'X-Token': token
},
method: 'GET',
timeout: 10000,
data: {
pageNum:this.pageNum,
pageSize:this.pageSize,
},
success: (res) => {
console.log("res",res)
if (res.data.code == 200) {
this.list=res.data.data.list
this.total=res.data.data.total
if(this.pageSize >= this.total){
this.status = 'nomore';
}else{
this.status = 'loadmore';
}
} else if (res.data.code == 202) {
this.status='nomore'
}
},
fail: (resq) => {
console.log(resq)
uni.showToast({
title: "请求超时!",
icon: 'none',
duration: 2000
});
}
})
}
}
}
</script>
<stylelang="scss"scoped>
.wrap {
padding:24rpx;
}
.item {
padding:24rpx0;
color: $u-content-color;
font-size:28rpx;
}
</style>
截图说明:


有些的不对的地方,谢谢指点!个人理解而已,代码本地测试功能可以正常运行!