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应该避免同时使用

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值