uni-app開發(2)---上拉加載組件封裝

PC對數據處理可以使用分頁，移動端通常是使用上拉加載處理。但是這個上拉加載在很多地方都是會使用的，所以需要我們抽里程組件。

應用場景：

在列表部分，使用上拉加載，這個時候需要使用scrolltolower上拉觸底事件，具體的代碼如下：

<scroll-view scroll-y class="list" @scrolltolower="loadMore(index)">
	<!-- 圖文列表 -->
	<block v-for="(item, index1) in items.list" :key="index1">
		<index-list :item="item" :index="index1"></index-list>
	</block>
	<!-- 上拉加載更多 -->
	<load-more :loadtext="items.loadtext"></load-more>
</scroll-view>

在上拉觸底方法中，我們需要加載更多數據，僞代碼如下：

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

<template>
	<view class="load-more">{{loadtext}}</view>
</template>

<script>
	export default {
		props: {
			loadtext: String
		}
	}
</script>

<style scoped>
	.load-more {
		color: #AAAAAA;
		padding: 15upx;
		text-align: center;
	}
</style>

注意事項：在上拉觸底事件中，往往會又回彈的問題，可以使用在page.json中配置app-plus中設置"bounce":"none"解決。