代码优化

vedio/components/home/index.vue

 <template>
 	<view class="body">
+
 		<view v-if="showMask" class="show-mask flex-v" @click="showMask=false">
 			<view class="mt-30" style="width: 90%;text-align: right;">
 				<image style="width: 30rpx;height: 30rpx;padding:6rpx;
@@ -12,10 +13,10 @@
 			<image :src="maskImage2" mode="widthFix"></image>
 		</view>
 
-		<z-paging class="flex-1" ref="paging" v-model="dataList" @query="queryList">
+		<scroll-view v-if="clientHeight != 0" scroll-y="true" :style="{'height': clientHeight + 'px'}"
+			@scroll="onScroll">
 			<view class="content">
-				<swiper class="banner" :style="'margin-top:'+statusBarHeight+'px;'" :indicator-dots="true"
-					:autoplay="true" :interval="2000" :duration="500">
+				<swiper class="banner" :indicator-dots="true" :autoplay="true" :interval="2000" :duration="500">
 					<swiper-item v-for="banner in bannerList" :key="banner.vedioId" @click="handleBanner(banner)">
 						<image class="banner-img" :src="banner.tabImage" mode="aspectFill"></image>
 					</swiper-item>
@@ -32,14 +33,8 @@
 									<view style="position: relative;">
 										<view style="position: absolute;z-index: 10;margin-left: 20rpx;">
 											<view style="position: relative;">
-												<view style="
-													position: absolute;
-													z-index: 10;
-													width: 50rpx;
-													text-align: center;
-													margin-top: 8rpx;
-													font-size: 24rpx;
-													color: white;">
+												<view
+													style="position: absolute;z-index: 10;width: 50rpx;text-align: center;margin-top: 8rpx;font-size: 24rpx;color: white;">
 													{{index+1}}
 												</view>
 												<image v-if="index==0"
@@ -62,14 +57,8 @@
 											:src="item.coverImage" mode="aspectFill"></image>
 									</view>
 
-									<view style="
-									position: absolute;
-									bottom: 10rpx;
-									background-color: black;
-									width: 100%;
-									opacity: 0.5;
-									">
-
+									<view
+										style="position: absolute;bottom: 10rpx;background-color: black;width: 100%;opacity: 0.5;">
 										<view style="display: flex;align-items: center;margin-left: 10rpx;">
 											<image
 												style="width: 20rpx;height: 20rpx;display: flex;align-items: right;margin-right: 10rpx;"
@@ -104,14 +93,8 @@
 
 						<view style="position: relative;">
 							<image class="img" :src="item.coverImage" mode="aspectFill"></image>
-							<view style="
-							position: absolute;
-							bottom: 10rpx;
-							width: 95%;
-							padding: 10rpx;
-							background-color: black;
-							opacity: 0.5;
-							">
+							<view
+								style="position: absolute;bottom: 10rpx;width: 95%;padding: 10rpx;background-color: black;opacity: 0.5;">
 								<view style="display: flex;flex-direction: row;justify-content:space-between;">
 									<view style="display: flex;align-items: center;">
 										<image
@@ -127,20 +110,13 @@
 						<view style="font-size: 30rpx;margin-top: 10rpx;margin-left: 12rpx;">{{item.title}}</view>
 						<!-- <view style="font-size: 22rpx;margin-top: 10rpx;margin-left: 12rpx;">{{item.vedioDesc}}</view> -->
 					</view>
-
 					<view class="item-wrap" v-for="(item, i) in dataList" :key="i" v-if="i % 2 == 1"
 						@click="handleInfo(item)">
 
 						<view style="position: relative;">
 							<image class="img" :src="item.coverImage" mode="aspectFill"></image>
-							<view style="
-							position: absolute;
-							bottom: 10rpx;
-							width: 95%;
-							padding: 10rpx;
-							background-color: black;
-							opacity: 0.5;
-							">
+							<view
+								style="position: absolute;bottom: 10rpx;width: 95%;padding: 10rpx;background-color: black;opacity: 0.5;">
 								<view style="display: flex;flex-direction: row;justify-content:space-between;">
 									<view style="display: flex;align-items: center;">
 										<image
@@ -159,14 +135,12 @@
 
 					</view>
 				</view>
+				<u-loadmore :status="loadStatus" @loadmore="loadMore"></u-loadmore>
 			</view>
-
-
-		</z-paging>
+		</scroll-view>
 
 		<view v-if="newRecordBean!=null"
 			style="width: 97%;height: 150rpx;margin: 10rpx;opacity: 0.8;background-color: black;z-index: 20;position: absolute;bottom: 0;border-radius:10rpx;">
-
 			<view style="display: flex;margin-left: 10rpx;">
 				<view style="flex-grow: 2;display: flex;align-items: center;">
 					<image style="border-radius:10rpx; width: 100rpx;height: 130rpx;margin-top: 10rpx;"
@@ -187,19 +161,10 @@
 				</view>
 
 				<view style="display: flex;flex-direction: column;align-items: flex-end;">
-					<image @click="handleBottomClose()"
-						style="width: 30rpx;height: 30rpx;display: flex;align-items: right;margin: 10rpx;"
+					<image @click="handleBottomClose()" style="width: 30rpx;height: 30rpx;display: flex;margin: 10rpx;"
 						src="../../static/index/ic_quit_white.png" mode="aspectFill"></image>
-					<view @click="handleBottomPlay(newRecordBean)" style="
-						width: 160rpx;
-						height: 50rpx;
-						line-height: 50rpx;
-						text-align: center;
-						background-color: red;
-						border-radius:30rpx;
-						color: white;
-						font-size: 24rpx;
-						margin-right: 20rpx;">
+					<view @click="handleBottomPlay(newRecordBean)"
+						style="width: 160rpx;height: 50rpx;margin-top: 8rpx;line-height: 50rpx;color: white;text-align: center;background-color: red;border-radius:30rpx;margin-right: 20rpx;">
 						继续观看
 					</view>
 				</view>
@@ -207,29 +172,6 @@
 			</view>
 		</view>
 
-		<!-- <uni-popup type="center" ref="select">
-			<view>
-				<view style="font-size: 30rpx;font-weight: 777;color: white;">刚刚看的</view>
-
-				<view style="text-align: center;">
-					<view>
-						<video :id="recommendBean.vedioId" :loop="true" :enable-progress-gesture="false"
-							:show-loading="true" :show-fullscreen-btn="false"
-							style="width:100%; height:100%;background: #f56c6c;" :src="recommendBean.vedioUrl"
-							:poster="recommendBean.coverImage" play-btn-position="center" object-fit="contain" />
-					</view>
-
-					<view>123</view>
-
-					<view @click="handleVipPay"
-						style="width: 350rpx;height: 80rpx;background-color: #f2575b;border-radius:20rpx;color: white;font-size: 26rpx;justify-content: center;align-items: center;display: flex;">
-						立即试看
-					</view>
-				</view>
-			</view>
-		</uni-popup> -->
-
-
 	</view>
 </template>
 <script>
@@ -267,10 +209,34 @@
 				showMask: false,
 				maskImage1: 'https://mints-web.oss-cn-beijing.aliyuncs.com/images/bg_find1.png',
 				maskImage2: 'https://mints-web.oss-cn-beijing.aliyuncs.com/images/bg_find2.png',
-				statusBarHeight: app.globalData.statusBarHeight,
+				clientHeight: 0,
+				page: 1,
+				size: 10,
+				loadStatus: 'loadmore'
 			};
 		},
+		mounted() {
+			let that = this
+			uni.getSystemInfo({
+				success: (res => {
+					this.clientHeight = res.windowHeight - 50;
+				})
+			});
+			// 匹配视频
+			this.showFirstDialog();
+		},
 		methods: {
+			onScroll(event) {
+				// 获取scrollview已滚动的高度
+				const scrollTop = event.detail.scrollTop;
+				// 获取内容的总高度
+				const contentHeight = event.detail.scrollHeight;
+
+				// 判断是否滑动到底部（已滚动的高度 + 视图高度 >= 内容高度）
+				if ((scrollTop + this.clientHeight + 50) >= contentHeight) {
+					this.loadMore()
+				}
+			},
 			showMaskFuc() {
 				let showFollowMask = uni.getStorageSync('show-follow-mask') || '';
 
@@ -286,8 +252,6 @@
 			show() {
 				this.showMaskFuc()
 
-				// 匹配视频
-				this.showFirstDialog();
 				// 轮播图
 				this.post({
 					url: '/vedio/topTabs',
@@ -308,6 +272,7 @@
 						this.topList = data.list;
 					}
 				});
+
 				// 最近观看剧
 				this.post({
 					url: '/vedio/newest',
@@ -322,29 +287,45 @@
 					}
 				});
 
-				if (this.$refs.paging != null) {
-					this.$refs.paging.refresh();
-				}
-			},
-			hide() {
-
+				this.page = 1
+				this.size = 10
+				this.loadList()
 			},
-			queryList(page, size) {
+			hide() {},
+			loadList() {
 				// 推荐列表
 				this.post({
 					url: '/vedio/list',
 					data: {
-						page,
-						size
+						page: this.page,
+						size: this.size
 					},
 					showLoading: false,
 					success: ({
 						data
 					}) => {
-						this.$refs.paging.complete(data.list);
+						this.loadStatus = data.list.size < this.size ? 'nomore' : 'loadmore';
+
+						if (data.list.size <= 10) {
+							this.dataList = [...this.dataList, ...data.list];
+							return
+						}
+
+						if (this.page == 1) {
+							this.dataList = data.list
+						} else {
+							this.dataList = [...this.dataList, ...data.list];
+						}
 					}
 				});
 			},
+			loadMore() {
+				if (this.loadStatus === 'loading' || this.loadStatus === 'nomore') return;
+
+				this.loadStatus = 'loading'
+				this.page = ++this.page
+				this.loadList()
+			},
 			handleBanner(item) {
 				gotoVideoPlayerPage(item)
 			},