uni-app小程序上拉刷新下拉加载更多的浅了解

**

uni-app小程序上拉刷新下拉加载更多的浅了解

onReachBottom生命周期（页面上拉触底的处理函数）
准备工作
在 data里面定义好 我们想要的一些属性
page：页数
limit：一页有多少条数据

刚进入页面的时候我们的page应该设为1 limit根据自己项目而定

data() {
		return {
			userName:null,
			page:1 ,//第几页
			limit:10,//一页有多少数据,
			simulation:[{name:'安阳张三',userId:1},{name:'心想里斯',userId:2},{name:'驻马店王五',userId:3},{name:'驻马店赵六',userId:4},
		{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},
		{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4}]
		}
	},

模拟请求数据 在methods方法里面写请求数据 参数为page
this.userName是我们的模拟数据

userList(page){
			//请求数据的时候 传参加上page
			console.log(page)
			this.userName = [{name:'安阳老刘',userId:1},{name:'心想老张',userId:2},{name:'驻马店老王',userId:3},{name:'驻马店王总',userId:4},
			{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},
			{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4}]
		}

在onload生命周期里面调用这个方法 page为的当前页数

onLoad(){
		this.userList(this.page)
		
	},

在我们的onReachBottom生命周期里面（页面上拉触底的处理函数）

uni.showLoading({
		    title: '拼命加载中'
		});
		
		console.log("我触底了哦")
		this.page++
		// this.userList(this.page)
		let arr = [];
		setTimeout(()=>{
		//模拟数据 arr代表我们新的数据	
			arr = this.simulation
			this.userName = this.userName.concat(arr)
			uni.hideLoading()
		},500)

完整代码

<template>
	<i-container>
		<i-nav-bar slot="header" :title="documentTitle">
			<view class="i-order-open" slot="left" @click="onAdduser">
				<uni-icon type="plusempty" size="30"></uni-icon>
				添加
			</view>
			<i-icon-search :placeholder="placeholder"></i-icon-search>
		</i-nav-bar>
		<view class="i-customer-list">
			<view @click="onUserorderlist(item.userId)" v-for="(item,index) in userName" :key="index">
				{{item.name}}
			</view>
		</view>
		
	</i-container>
</template>

<script>
export default {
	data() {
		return {
			placeholder:'搜索客户姓名',
			userName:null,
			page:1 ,//第几页
			limit:10,//一页有多少数据,
			simulation:[{name:'安阳张三',userId:1},{name:'心想里斯',userId:2},{name:'驻马店王五',userId:3},{name:'驻马店赵六',userId:4},
		{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},
		{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4}]
		}
	},
	onLoad(){
		this.userList(this.page)
		
	},
	methods:{
		onAdduser(){
			uni.navigateTo({
				url:'./edit'
			})
		},
		onUserorderlist(id){
			console.log(id)
			uni.navigateTo({
				url:'./order?customerId='+id
			})
		},
		userList(page){
			//请求数据的时候 传参加上page
			console.log(page)
			this.userName = [{name:'安阳老刘',userId:1},{name:'心想老张',userId:2},{name:'驻马店老王',userId:3},{name:'驻马店王总',userId:4},
			{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},
			{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4},{name:'驻马店王总',userId:4}]
		}
	},
	onPullDownRefresh (){	
			  console.log("我刷新了吗")
		      uni.stopPullDownRefresh()//这里是防止下拉的回不去，回去效果卡顿	
	},
	onReachBottom(){
		uni.showLoading({
		    title: '拼命加载中'
		});
		
		console.log("我触底了哦")
		this.page++
		// this.userList(this.page)
		let arr = [];
		setTimeout(()=>{
			
			arr = this.simulation
			this.userName = this.userName.concat(arr)
			uni.hideLoading()
		},500)
		
		
		//判断是否已经加载完了
		// if(this.userName.length<this.limit){
		// 	uni.showToast({
		// 		title:'已经加载全部了'
		// 	})
		// }
	}
};
</script>

<style lang="stylus" scoped>
.i-order-open
	display flex
	align-items center
.i-customer-list
	padding 0 50rpx
	& view
		border-bottom 1px solid #f1f1f1
		height 100rpx
		display flex
		align-items center

</style>