teaching-uniapp/pages/activityList/activityList.vue

<template>
	<view class="activeList">
		<statusBar :item="navbarData"></statusBar>
		<scroll-view class="list" scroll-y="true">
			<view>
				<teaching-case :activeList="activeList" :indexId="index"></teaching-case>
			</view>
		</scroll-view>
		<view class="loading">
			<view v-if="newsLoading==1">数据加载中...</view>
			<view v-if="newsLoading==2">没有更多了~~</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				navbarData: {
					title: '活动推荐列表',
					btn: 1
				},
				// teaData: {
				// 	btn: 1
				// },
				activeList: [],
				// 触底加载动画提示
				newsLoading: 0, //0默认值  1加载中 2没有更多了
				currentPage: 1,

			};
		},
		methods: {
			// 获取教研活动
			getData() {
				let data = {
					openid: uni.getStorageSync('oId'),
					ty: 1,
					page: this.currentPage, //下拉获取更多的备用字段
					lim: 15 //一次获取多少数据
				}
				this.$request('/selectActivity', "POST", data).then(res => {
					console.log(res[0]);
					if (!res[0].length) {
						this.newsLoading = 2
					} else {
						this.newsLoading = 0
					}
					this.activeList = [...this.activeList, ...res[0]]
					// this.activeList = res[0]
				})
			},

		},
		// 触底加载更多
		onReachBottom() {
			console.log(111);
			if (this.newsLoading == 2) return
			
			this.newsLoading = 1
			this.currentPage++
			setTimeout(this.getData, 1000)

		},
		onLoad() {
			this.getData()
		}
	}
</script>

<style lang="scss">
	.activeList {
		.loading {
			height: 50rpx;
			text-align: center;
			padding-top: 20rpx;
			padding-bottom: 100rpx;
			font-size: 26rpx;
			color: #888;
			line-height: 2em;
		}
	}
</style>