uniapp底部刷新加载

滚动内容

<scroll-view class="product-list" :scroll-y="true" @scrolltolower="scrollBottom">
	<view class="product-item" v-for="(item,index) in goodlist" :key="item.id">
		…………
	</view>
	<view v-if="loadingMore" class="nomore">加载中...</view>
</scroll-view>

对应css

.product-list {
	width: 100%;
	padding: 10px;
	box-sizing: border-box;
	padding-bottom: 110rpx;
	height: 80vh;
	// height: 300px;
	overflow-y: scroll;
}
.nomore {
	width: 100%;
	text-align: center;
	margin-top: 10px;
	height: 100rpx;
}

监测滚动到底部的方法

// 滚动到底部
scrollBottom() {
	console.log("滚动到底部!");
	if (this.loadingMore) return;  //滚动到最底部了
	if (this.current <= Math.ceil(this.total / 10)) {
		this.searchscroll = true;
		this.search(this.searchName); // 加载更多数据
		this.loadingMore = true;
	}			
},

定义数据

loadingMore: false, // 是否正在加载更多数据
current: 1,
total: 0,
pageSize: 10,