uniapp上拉加载

最近在写uniapp的项目，看好写到上拉加载这一块，拿出来详细说一下写法，和注意事项吧。
首先在data里面要有这些值

				last_page: '', //总页数
				page: 2,//上拉加载的起始页
				loadingnum: 12, //加载条数
				send:false,//上拉加载的状态  避免数据没更新时重复请求
				productlist:[],//数据盒子

				nodata: false, //没有更多数据
				loadings: false, //加载框

然后和onShow或者onLoad同级的地方写onReachBottom()

//上拉加载
		onReachBottom() {
			//判断总页数是否大于1 
			if (this.last_page > 1) {
				if(this.send == false){		
					if (this.page <= this.last_page) {
						//开始加载
						this.send = true;
						this.loadings = true;//这个是上拉的特效
						this.$api.get(global.apiUrls.productlist, {
								// status:this.current,
								page: this.page,
								pagesize: this.loadingnum,
								type: 2,
							})
							.then(res => {
								const {
									productlist
								} = this;
								if(res.data.code == 1){
								//延迟加载数据 减少并发量
									setTimeout(() => {
										//结束加载
										this.loadings = false;
										this.productlist = [...productlist, ...res.data.data.data]
										this.send = false;
									}, 700)
									this.page++;
								}else{
									this.$message.info('诶呀,加载失败了稍后再试试吧');
									this.send = false;
								}
								
							}).catch(err => {
								// console.log(res)
								this.send = false;
							})
					
					} else {
							this.nodata = true;	//当加载完没数据后 显示无更多数据							
					}
				}
				
			}

		},

在methods中写第一次获取数据的方法

//获取数据
			getproductlist() {
				this.$api.post(global.apiUrls.productlist, {
						page: 1,
						pagesize: this.loadingnum,
						type: 2, //获取数据类型  
					})
					.then(res => {
						console.log(res.data, 1111111111)
						if(res.data.code == 1){
							this.productlist = res.data.data.data;
							this.last_page = res.data.data.last_page;
							if (res.data.data.last_page == 1) {
								this.nodata = true;
							}
						} else{
							this.$message.info('唉,获取数据失败了');
							this.nodata = true;
						}						
					}).catch(err => {
						console.log(res)
					})
			},

onLoad里面调用 getproductlist , 不要放在onShow里面，因为一般都上拉加载处都是列表，点击是可以进入详情页的，如果放到onShow里面会造成每次从详情页返回都会重新获取数据，造成页面刷新，以及内容回到最上面。

this.getproductlist();//获取数据

如果有一个界面有其他分类的，在切换类型时，切记要重置 page（上拉起始页），也可以将总页数和上拉起始页一起重置，可以在切换方法里加入

this.page = 2;//将上拉起始页重置到 2   **这部是必须要有的**
this.last_page = '',//将总页数置空    

如果页面有下拉刷新,同样切记一定要将 page重置到2 代码同上;

加载特效 使用了uview组件
底部loading 和无更多数据
html

		<view class="loading" v-show="loadings">
			<view class="loading-san">
				<u-loading size="40" color="#FFBA4B" ></u-loading>
				<view class="logintext">一大波玩偶正在赶来~~</view>
			</view>
		</view>
		<view class="nodata" v-show="nodata">
			没有更多数据
		</view>

css

	//加载
	.loading {
		width: 100%;
		height: 100upx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		background-color: #F6F7F9;

		.loading-san {
			display: flex;
			justify-content: space-around;
			align-items: center;

			.logintext {
				margin-left: 16upx;
				font-size: 28upx;
				font-family: PingFang;
				color: #999999;
			}
		}
	}
	//没有更多数据
	.nodata {
		width: 100%;
		height: 100upx;
		background-color: #F6F7F9;
		text-align: center;
		line-height: 100upx;
		color: #999999;
		font-size: 24upx;
		font-family: PingFang SC;
		font-weight: 400;
	}