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)

完整代码







你可能感兴趣的:(uni-app小程序上拉刷新下拉加载更多的浅了解)