uniapp:上拉分页--scroll-view篇

 前提：该文章重点是触底事件的方法和合并新数据，仅供参考

 上拉分页的功能分析：

1、用户上拉页面，滚动条触底，开始加载下一页数据

2、判断有没有下一页数据

3、没有的话，显示提示内容

4、还有下一页数据的话，加载下一页数据

条件：

后端提供：总条数

前端传值：当前页数和当前条数

<template>
	<view class="container" tyle="background: #EBFBF4;height:100vh;">
		<u-popup v-model="showPopup" mode="bottom" :closeable="true" :border-radius="26">
			<view class="service-content">
				<view class="title">用户列表</view>
				<scroll-view style="height: 50vh;width: 90vw;" scroll-y="true" @scrolltolower="onBottom">
					<view v-for="(item,index) in userLists" :key="index" @click="sureID(item.user_id)">
						<view class="bgc-fff pd-30 flex-r fai-c mgb-30"
							style="border: 1px solid #16C372;border-radius: 25rpx;">
							<image class="logo-80 mgr-20"
								:src="item.avatar_url?item.avatar_url:'/static/default-avatar.png'"></image>
							<view class="flex-c">
								<view>用户ID：{{item.user_id}}</view>
								<view class="flex-r fai-c mgt-10">
									<view class="mgr-10">{{item.nick_name}}</view>
									<view>{{item.mobile}}</view>
								</view>
							</view>
						</view>
					</view>
					<view class="col-999" v-if="!userLists.length">
						暂无相关用户~
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import * as UserApi from '@/api/user' //后端接口
	export default {
		components: {

		},
		data() {
			return {
				showPopup: true,
				userLists: [],
				cData: {
					pageNum: 1, //第几页
					pageSize: 15, //显示多少条
				},
				total: null, //总条数
				
			}
		},
		mounted() {

		},
		onLoad() {
			this.userList()		
		},
		methods: {	
			userList() {
				const app = this
				UserApi.userList()
					.then(result => {
						// app.userLists = result.data.list.data
						// 合并新数据
						const newList = result.data.list.data
						if (app.cData.pageNum == 1) {
							app.userLists = newList
						} else {
							if (newList.length != 0) {
								app.userLists = app.userLists.concat(newList)
							} else {
								app.cData.pageNum = app.cData.pageNum - 1
							}
						}
					})
					.catch(err => {})
			},
			onBottom() { //触底事件
				if (this.cData.pageNum * this.cData.pageSize >= this.total) {
					uni.showToast({
						title: '亲，已经到底了~',
						icon: 'none',
						duration: 1000
					});
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				} else {
					if (this.cData.pageNum <= this.cData.pageNum - 1) {
						setTimeout(() => {
							uni.hideLoading()
						}, 500)
					} else {
						uni.showLoading({
							title: '加载中'
						});
						this.cData.pageNum++
						this.userList()
					}
					setTimeout(() => {
						uni.hideLoading()
					}, 500)
				}
			},
			
		}
	}
</script>

<style lang="scss" scoped>
	.service-content {

		padding: 50rpx 0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;

		.title {
			font-size: 30rpx;
			margin-bottom: 50rpx;
			font-weight: bold;
			text-align: center;
		}
	}
</style>

补充 ：scroll-view与生命周期中的onReachBottom应该避免同时使用