分页

pages.json

@@ -1186,7 +1186,7 @@
 					"path": "tutorial",
 					"style": {
 						"navigationStyle": "custom",
-						"enablePullDownRefresh": false,
+						"enablePullDownRefresh": true,
 						"navigationBarTitleText": "商家教程"
 					}
 				}

pages/merchantTutorial/tutorial.vue

@@ -19,9 +19,8 @@
 				active-color="rgba(243, 74, 64, 1)" inactive-color="rgba(102, 102, 102, 1)" font-size="32"
 				bar-width="55" bar-height="6" :current="current" @change="change">
 			</u-tabs>
-			<view class="center-box">
-				<view class="list" v-if="courseList.length>0" v-for="(a,i) in courseList" :key="i"
-					@click="onLookCord(a.video_url.external_url)">
+			<view class="center-box" v-if="courseList.length>0">
+				<view class="list" v-for="(a,i) in courseList" :key="i" @click="onLookCord(a.video_url.external_url)">
 					<image :src="a.image_url?a.image_url.external_url:''" mode="heightFix" class="img"></image>
 					<view class="infor">
 						<view class="title">
@@ -35,8 +34,9 @@
 						观看
 					</view>
 				</view>
-				<u-empty text="暂无数据显示哦～" v-else mode="list"></u-empty>
+				<u-loadmore :status="status" :icon-type="iconType" :load-text="loadText" />
 			</view>
+			<u-empty text="暂无数据显示哦～" v-else mode="list"></u-empty>
 		</view>
 		<u-mask :show="show" @click="pauseVideo">
 			<view class="warp">
@@ -57,7 +57,17 @@
 				current: 0,
 				courseList: [],
 				show: false,
-				video_url: ''
+				video_url: '',
+				page: 1,
+				pageSize: 6,
+				iconType: 'flower',
+				status: 'loadmore',
+				total: 0,
+				loadText: {
+					loadmore: '上拉加载更多',
+					loading: '正在加载',
+					nomore: '没有更多了 '
+				}
 			}
 		},
 		onLoad() {
@@ -65,6 +75,19 @@
 		},
 		onShow() {
 
+		},
+		// 下拉刷新
+		onPullDownRefresh() {
+			this.courseList = [];
+			this.page = 1;
+			this.getCourseList();
+			uni.stopPullDownRefresh(); //停止刷新
+		},
+		onReachBottom() {
+			if (this.page * this.pageSize >= this.total) return
+			this.page++;
+			this.status = 'loading'
+			this.getCourseList();
 		},
 		methods: {
 			pauseVideo() {
@@ -74,6 +97,8 @@
 				this.show = false
 			},
 			change(index) {
+				this.courseList = [];
+				this.page = 1;
 				this.current = index;
 				this.getCourseList()
 			},
@@ -105,9 +130,10 @@
 			// 列表
 			async getCourseList() {
 				let that = this;
-				that.courseList = []
 				let pames = {
-					courseCategoryId: that.courseTypeList[that.current].course_category_id
+					courseCategoryId: that.courseTypeList[that.current].course_category_id,
+					page: that.page,
+					pageSize: that.pageSize
 				}
 				let {
 					status,
@@ -115,9 +141,16 @@
 					data
 				} = await api.courseList(pames);
 				if (status == 200) {
-					that.courseList = data.list
+					const newData = data.list.data || [];
+					that.courseList = [...that.courseList, ...newData]; // 将新数据添加到已有数据的尾部
+					that.total = data.list.total;
+					if (that.courseList.length >= that.total) {
+						that.status = 'nomore'
+					} else {
+						that.status = 'loadmore'
+					}
 				} else {
-					that.list = []
+					that.total = 0
 					that.$toast(message)
 				}
 			},
@@ -133,7 +166,7 @@
 	::v-deep .u-empty {
 		padding: 100rpx 0;
 	}
-	
+
 	.warp {
 		display: flex;
 		align-items: center;
@@ -152,7 +185,7 @@
 
 		.park-top {
 			width: 100%;
-			height: 420rpx;
+			height: 450rpx;
 			background: url(https://www.royaum.com.cn/static/user/courseBg.png);
 			background-size: 100%;
 
@@ -163,8 +196,7 @@
 				color: rgba(51, 51, 51, 1);
 				text-align: left;
 				vertical-align: top;
-				padding-top: 30rpx;
-				padding-left: 48rpx;
+				padding: 30rpx 0rpx 20rpx 48rpx;
 			}
 
 			.top-marker {
@@ -184,6 +216,7 @@
 			background: #fff;
 			width: 100%;
 			overflow: hidden;
+			padding-bottom: 50rpx;
 
 			.center-box {
 				overflow: hidden;