首页添加下拉请求

apis/modules/course.js

@@ -14,7 +14,7 @@ export const recentUse = data => {
 }
 
 export const schoolCourse = data => {
-  return get('nakadai/nakadai/curriculum/schoolCourse', data)
+  return post('nakadai/nakadai/curriculum/schoolCourse', data)
 }
 
 export const queryChaptersAndSubsections = id => {

pages.json

@@ -4,7 +4,7 @@
             "path" : "pages/index/index",
             "style" :                                                                                    
             {"navigationBarTitleText": "课程",
-                "enablePullDownRefresh": false
+                "enablePullDownRefresh": true
             }
         },
         {

pages/index/index.vue

@@ -8,13 +8,16 @@
 			</scroll-view>
 		</view>
 		
-		<ul v-if="list.length" class="list">
-			<li v-for="(item, i) in list" :key="i" @click="toDetail(item)">
-				<image class="cover" :src="item.coverUrl"></image>
-				<view class="name">{{ item.goodsName }}</view>
-				<view class="entry">{{ !item.isInEffect ? '续费' : '进入课程' }}</view>
-			</li>
-		</ul>
+		<template v-if="list.length">
+			<ul class="list">
+				<li v-for="(item, i) in list" :key="i" @click="toDetail(item)">
+					<image class="cover" :src="item.coverUrl"></image>
+					<view class="name">{{ item.goodsName }}</view>
+					<view class="entry">{{ !item.isInEffect ? '续费' : '进入课程' }}</view>
+				</li>
+			</ul>
+			<uni-load-more :status="status" />
+		</template>
 		<empty v-else />
 		
 		<realName ref="realName" />
@@ -55,6 +58,14 @@
 				uni.stopPullDownRefresh()
 			}, 1500)
 		},
+		// 上拉加载
+		onReachBottom() {
+			if (this.reachBottom >= 0) {
+				this.reachBottom = 1
+				this.status = 'loading'
+				this.getList()
+			}
+		},
 		onShow() {
 						// uni.setStorageSync('token', 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOjQ2NzQ0LCJyblN0ciI6IktVcVR5eWtSbGlVQzF0dmRjdDRuR3dWaGVBaTJwQ2lMIiwiYWNjb3VudElkIjo0Njc0NCwidXNlcklkIjo0Njc0Mywic2Nob29sSWQiOjI4NDYsInVzZXJOYW1lIjoiYWMiLCJwbGF0Zm9ybUlkIjoiMSJ9.zo6L0AYyZA5yfMFovV9oGQHuFJgs936fa4bzyvpiK4Y')
 			this.$refs.realName.handleRealName()
@@ -63,20 +74,40 @@
 		methods: {
 			// 课程列表
 			async getList() {
+				uni.showLoading({
+					title: '加载中'
+				})
 				// 最近使用
 				if (this.curTab === 0) {
-					const { page } = await recentUse({
-					  pageNum: 1,
-					  pageSize: 100,
-					  goodsName: this.keyword,
+					const res = await recentUse({
+						courseType: 0,
+					    pageNum: this.page,
+					    pageSize: this.pageSize,
+					    goodsName: this.keyword,
 					})
-					this.list = page.records
+					uni.hideLoading()
+					// 未加载完所有数据，并且不是筛选，则拼接list，否则直接赋值
+					const list = res.list.records
+					this.list = this.reachBottom > 0 ? [...this.list, ...list] : list
+					this.page++ // 每次获取了数据后page+1
+					const noMore = this.list.length === res.list.total // 是否加载完所有数据
+					this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
+					this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
 				} else {
 					const { data } = await schoolCourse({
-					  authority: this.curTab === -1 ? '' : this.curTab,
-					  goodsName: this.keyword,
+					    authority: this.curTab === -1 ? '' : this.curTab,
+					    goodsName: this.keyword,
+						pageNum: this.page,
+						pageSize: this.pageSize,
 					})
-					this.list = data
+					uni.hideLoading()
+					// 未加载完所有数据，并且不是筛选，则拼接list，否则直接赋值
+					const list = data.records
+					this.list = this.reachBottom > 0 ? [...this.list, ...list] : list
+					this.page++ // 每次获取了数据后page+1
+					const noMore = this.list.length === data.total // 是否加载完所有数据
+					this.status = noMore ? 'noMore' : 'more' // 加载完了则设置为noMore
+					this.reachBottom = noMore ? -1 : 0 // 加载完了则设置为-1
 				}
 			},
 			initList() {
@@ -98,7 +129,7 @@
 				},
 				...data,
 			  ]
-			  this.getList()
+			  this.initList()
 			},
 			// tab切换
 			tabChange(id) {
@@ -115,6 +146,9 @@
 
 <style scoped lang="scss">
 .top {
+	position: sticky;
+	top: 0;
+	left: 0;
 	padding: 20rpx 20rpx 0;
 	margin-bottom: 20rpx;
 	background-color: #fff;
@@ -142,9 +176,7 @@
 .list {
 	display: flex;
 	flex-wrap: wrap;
-	max-height: calc(100vh - 262rpx);
-	padding: 40rpx 30rpx 30rpx;
-	overflow: auto;
+	padding: 40rpx 30rpx 0;
 	li {
 		width: calc(50% - 16rpx);
 		padding: 24rpx;