更新滚动图片

src/pages/work/projectImage/projectImage.vue

@@ -1,38 +1,44 @@
 <template>
 	<view>
-		
-		<uni-grid :column="2" :highlight="true" :show-border="false" :square="true">
-			<uni-grid-item v-for="(item, index) in imageList" :key="index"
-			               class="custom-grid-item"
-			>
-				<image
-						:src="item.url"
-						class="project-image"
-						mode="aspectFill"
-						@click="previewImage(index)"
-				/>
-			</uni-grid-item>
-		</uni-grid>
-		<!--		<image-->
-		<!--				v-for="(item, index) in imageList"-->
-		<!--				:key="index"-->
-		<!--				:src="item.url"-->
-		<!--				class="project-image"-->
-		<!--				mode="aspectFill"-->
-		<!--				@click="previewImage(index)"-->
-		<!--		/>-->
-
+		<scroll-view
+				:scroll-with-animation="true"
+				class="scroll-view"
+				scroll-y
+				@scrolltolower="loadMore"
+		>
+			<uni-grid :column="2" :highlight="true" :show-border="false" :square="true">
+				<uni-grid-item v-for="(item, index) in imageList" :key="index"
+				               class="custom-grid-item"
+				>
+					<image
+							:src="item.url"
+							class="project-image"
+							mode="aspectFill"
+							@click="previewImage(index)"
+					/>
+				</uni-grid-item>
+			</uni-grid>
+			<!--		<image-->
+			<!--				v-for="(item, index) in imageList"-->
+			<!--				:key="index"-->
+			<!--				:src="item.url"-->
+			<!--				class="project-image"-->
+			<!--				mode="aspectFill"-->
+			<!--				@click="previewImage(index)"-->
+			<!--		/>-->
+		</scroll-view>
 	</view>
 </template>
 
 <script setup>
 import {onLoad} from '@dcloudio/uni-app'
-import {ref} from 'vue'
+import {ref, reactive} from 'vue'
 import {getOaProjectIndexImg} from "@/api/oa/project";
 import config from "@/config";
 
 const imageList = ref([])
-
+const loading = ref(false)
+const noMore = ref(false)
 const projectData = reactive({
 	projectId: '',
 	name: '',
@@ -56,29 +62,32 @@ onLoad((options) => {
 })
 
 async function getProjectImage() {
+	if (loading.value || noMore.value) return
+
+	loading.value = true
+
 	try {
 		const res = await getOaProjectIndexImg(projectData)
 
 		if (res?.accessories) {
-			// 处理图片URL
-			imageList.value = res.accessories.split(',').filter(url => url.trim())
+			const newImages = res.accessories.split(',').filter(url => url.trim())
 					.map(url => {
-						// 去除两端空格
 						let imageUrl = url.trim();
-
-						// 如果URL不是以http开头，添加baseUrl和apiPrefix
 						if (!imageUrl.startsWith('http')) {
 							imageUrl = `${config.baseUrl}${imageUrl}`;
 						}
-
-						// 				// 微信小程序需要https协议
-
-						// imageUrl = imageUrl.replace(/^http:/, 'https:');
-
-
+						// #ifdef MP-WEIXIN
+						imageUrl = imageUrl.replace(/^http:/, 'https:');
+						// #endif
 						return {url: imageUrl};
-						// 		}))
 					})
+
+			if (newImages.length === 0) {
+				noMore.value = true
+			} else {
+				imageList.value = [...imageList.value, ...newImages]
+				projectData.pageNum++
+			}
 		}
 	} catch (error) {
 		console.error('获取图片失败:', error)
@@ -86,8 +95,16 @@ async function getProjectImage() {
 			title: '加载图片失败',
 			icon: 'none'
 		})
+	} finally {
+		loading.value = false
 	}
+}
 
+// 加载更多
+function loadMore() {
+	if (!loading.value && !noMore.value) {
+		getProjectImage()
+	}
 }
 
 // 图片预览
@@ -105,9 +122,14 @@ function previewImage(current) {
 </script>
 
 <style scoped>
+.scroll-view {
+	height: 100vh;
+	padding-bottom: 100rpx;
+}
+
 /* 修改网格项的内边距 */
 :deep(.custom-grid-item .uni-grid-item__box) {
-	padding: 10rpx !important; /* 调整这个值来控制间距大小 */
+	padding: 20rpx !important;
 }
 
 /* 调整图片大小 */
@@ -116,4 +138,10 @@ function previewImage(current) {
 	height: 100%;
 	border-radius: 10rpx;
 }
+
+.loading-more {
+	display: flex;
+	justify-content: center;
+	padding: 20rpx 0;
+}
 </style>