uni-app开发(2)---上拉加载组件封装

PC对数据处理可以使用分页，移动端通常是使用上拉加载处理。但是这个上拉加载在很多地方都是会使用的，所以需要我们抽里程组件。

应用场景：

在列表部分，使用上拉加载，这个时候需要使用scrolltolower上拉触底事件，具体的代码如下：

在上拉触底方法中，我们需要加载更多数据，伪代码如下：

loadMore(index) {
	if (this.newsList[index].loadtext != '上拉加载更多') {
		return
	}
	// 修改状态
	this.newsList[index].loadtext = '加载中...';
	// 获取数据
	setTimeout(()=> {
		let obj = {
			userpic: '../../static/demo/userpic/12.jpg',
			username: '风向',
			isguanzhu: false,
			title: '标题',
			type: 'img',
			titlepic: '../../static/demo/datapic/11.jpg',
			infonum: {
				index: 0, //0未操作1顶2踩
				dingnum: 11,
				cainum: 11,
			},
			commentnum: 10,
			sharenum: 10,
			palynum: 200,
			long: "2:35"
		};
		this.newsList[index].list.push(obj)
		// 获取完成
		// this.newsList[index].loadtext = '没有更多数据';
	}, 100)


},

load-more.vue

注意事项：在上拉触底事件中，往往会又回弹的问题，可以使用在page.json中配置app-plus中设置"bounce":"none"解决。