小程序uniapp-uview之封装u-cell/u-loadmore的简单上拉分页列表

一.组件内容

• Props

参数	说明
data	列表的请求数据
page-info	是对象，{page:1,size:1}
total-pages	总的页数

• Event

事件名	说明
change-page	列表分页请求，$emit参数为page（请求为哪一页）

• HTML

<template>
	<view>
		<u-cell-group>
			<slot>slot>
		u-cell-group>
		<u-loadmore v-show="showLoadmore" :status="loadmoreStatus" :load-text="loadText" @loadmore="loadmore()"
			font-size="32" margin-top="5" margin-bottom="5" />
	view>
template>

• JS

<script>
	export default {
		props:{
			totalPages:{
				type:Number,
				default:2
			},
			pageInfo: {
				type:Object,
				default:{
					page:1,
					size:10
				}
			},
			data: {
				type:Array,
				default:[]
			}
		},
		data() {
			return {
				loadmoreStatus: 'loadmore',
				loadText: {
					loadmore: '点击或上拉刷新',
					loading:'正在加载中...',
					nomore:'没有更多了'
				},
				showLoadmore:false
			}
		},
		methods: {
			loadmore() {
				if (this.pageInfo.page >= this.totalPages) {
					if(this.loadmoreStatus != 'nomore') {
						this.afterRequest()
					}
					return   
				}
				this.loadmoreStatus = 'loading'
				this.$emit('changePage',this.pageInfo.page + 1)
			},
			afterRequest() {
				if(this.pageInfo.page >= this.totalPages) {
					this.loadmoreStatus = 'nomore'
				} else {
					this.loadmoreStatus = 'loadmore'
					this.afterRequest()
				}
			}
		},
		watch:{
			data(value) {
				if(this.utils.isEmpty(value)) {
					this.showLoadmore = false
				} else {
					this.showLoadmore = true
				}
			}
		},
		mounted() {
		}
	}
</script>

二.调用组件

• HTML

<view>
		<d-cell-group ref="paging" @change-page="getList" :data="list"
			:page-info="pageInfo" :totalPages="total-pages">
			<u-cell-item title="标题" value="内容" :arrow="false"/>
		d-cell-group>
view>

这里的就是上面的组件名

• JS

<script>
	export default {
		data() {
			return {
				list: [],
				pageInfo: {
					page: 1,
					size: 10
				},
				totalPages: 0
			}
		},
		methods: {
			getList(page) {
				const copy = {page,size:this.pageInfo.size}
				return api.getList(copy).then(res => {
					this.list = this.list.concat(res.data.list)
					this.totalPages = res.data.pages
					this.pageInfo.page = page
				})
			},
		onLoad() {
			uni.startPullDownRefresh()
		},
		onPullDownRefresh() {
			this.list = []
			this,getList(1).then(res => {
				uni.stopPullDownRefresh()
			})
		},
		onReachBottom() {
			this.$refs.paging.loadmore()
		}
	}
</script>

这里的几个点：
1.获取列表的请求,先不去改变page,在请求成功之后再去更改page的值
2.列表获取成功之后，采取.concat将当前的list与获取到的列表拼接在一起。
3.初次加载界面时，触发下拉刷新，在下拉刷新的方法内去请求列表。
4.当界面到底部时，去触发上拉刷新，通过ref调用封装组件的loadmore()方法。

最后的一个效果，上拉或者点击都会发起下一页的请求。