teaching-uniapp/pages/teachingList/teachingList.vue

<template>
	<view class="teachingList">
		<statusBar :item="navbarData"></statusBar>
		<!-- <teaching-case :item="teaData"></teaching-case> -->
		<!-- <view class="" style="padding-bottom: 50rpx;">
			<teaching-case :activeList="activeList" :indexId="index" :item="teaData"></teaching-case>
		</view> -->

		<scroll-view class="list" scroll-y="true">
			<view>
				<!-- 推荐课程插槽组件 -->
				<listBlock1 v-for="i in classList">
					<template #pic>
						<image :src="i.pic" mode="aspectFill"></image>
					</template>
					<template #tit>
						{{i.acName}}
					</template>
					<template #intro>
						{{ i.brief }}
					</template>
					<template #Sicon>
						<image src="http://43.139.158.220:5007/img/static/yym/Star 1 (Stroke).png"
							style="width: 28rpx; height: 26rpx" mode="aspectFill"></image>
					</template>
					<template #Dicon>
						<image src="http://43.139.158.220:5007/img/static/yym/Vector (Stroke).png" style="width: 22rpx; height: 26rpx" mode="aspectFill"></image>
					</template>
					<template #btn>
						<button class="list1btn sBtn-font" @click.stop="join">
							立即参与
						</button>
					</template>
				</listBlock1>
			</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,
					btn_2: 1,
				},
				// 渲染数据
				classList: [],
				// 触底加载动画提示
				newsLoading: 0, //0默认值  1加载中 2没有更多了
				currentPage: 1,
			};
		},
		methods: {
			// 获取页面数据
			getData() {
				let data = {
					openid: uni.getStorageSync('oId'),
					ty: 3,
					page: this.currentPage, //下拉获取更多的备用字段
					lim: 10 //一次获取多少数据
				}
				this.$request('/selectActivity', "POST", data).then(res => {
					console.log('获取数据',res[0]);
					if (!res[0].length) {
						this.newsLoading = 2
					} else {
						this.newsLoading = 0
					}
					// return
					this.classList=[...this.classList,...res[0]]
					// this.activeList = res[0]
				})
			},
		},
		// 触底加载更多
		onReachBottom() {
			console.log(111);
			if (this.newsLoading == 2) {
				return
			}
			this.newsLoading = 1
			this.currentPage++
			setTimeout(this.getData,2000)
			
		},
		
		onLoad() {
			// 一进页面就加载数据
			this.getData()
		}
	}
</script>

<style lang="scss">
	.teachingList {
		.loading{
			height: 50rpx;
			text-align: center;
			padding-top: 20rpx;
			padding-bottom: 100rpx;
			font-size: 26rpx;
			color:#888;
			line-height: 2em;
		}
		.list1btn {
			z-index: 5;
			border: none;
			padding: 0;
			text-align: center;
			// padding: 8px, 24px, 8px, 24px;
			background-color: rgba(48, 129, 232, 1);
			color: #fff;
			border-radius: 100rpx;
			float: right;
			width: 144rpx;
			height: 48rpx;
			line-height: 48rpx;
			letter-spacing: 1px;
		}
	}
</style>