上啦加载功能实现

引入组件并使用

<template>
	<view class="paper">
		<!-- 小纸条列表 -->
		<block v-for="(item, index) in list" :key="index">
			<paperList :item="item" :index="index"> </paperList>
		</block>
		<!-- 上啦加载 -->
		<loadMore :loadtext="loadtext"></loadMore>
	</view>
</template>

<script>
	// 小纸条列表组件
	import paperList from '../../components/paper/paper-list.vue'
	// 加载更多
	import loadMore from '../../components/common/load-more.vue'
	export default {
		components: {
			paperList,
			loadMore
		},
		data() {
			return {
				loadtext: '上啦加载更多',
				list: [		
                  ..........
				]
			}
		},
		// 监听上啦加载更多
		onReachBottom() {
			this.loadmore()
		},
		methods: {
			// 上啦加载
			loadmore() {
				if (this.loadtext !== "上啦加载更多") {
					return
				}
				// 修改状态
				this.loadtext = "加载中。。。"
				// 获取数据
				setTimeout(() => {
					// 获取完成
					let obj = {
						userpic: '../../static/demo/userpic/11.jpg',
						username: '星城哈哈',
						time: '10:10',
						data: '哈哈哈哈哈哈哈哈哈, 我来也',
						noreadnum: 99
					}
					this.list.push(obj)
					this.loadtext = "上啦加载更多"
				}, 1000)
				// this.loadtext = "没有更多数据了"
			},
		}
	}
</script>