uniapp 使用u-loadmore 分頁

環境：使用的是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>

　截圖說明：

 

 

 

  有些的不對的地方，謝謝指點！個人理解而已，代碼本地測試功能可以正常運行！