滚动列表.

.gitignore

@@ -0,0 +1 @@
+/unpackage/

pages/index/index.vue

@@ -5,6 +5,32 @@
 		</image>
 		<uniNoticeBar showIcon single scrollable text="赠品仅限线下购买设备的用户领取，需人工审核，预计3个工作日内完成！"
 			style="width: 100%;position:fixed;top:10%" background-color="transparent" color="#000" />
+
+
+		<view class="auto-scroll-container" catchtouchmove="return false">
+			<!-- 滚动容器 -->
+			<scroll-view class="scroll-view" scroll-x :scroll-with-animation="false" ref="scrollView"
+				@scroll="onScroll">
+				<!-- 图片列表容器 (复制一份实现无缝滚动) -->
+				<view class="scroll-content" :style="{ transform: `translateX(${translateX}px)` }"
+					catchtouchmove="return false">
+					<view class="image-list" ref="imageList">
+						<view class="image-item" v-for="(item, index) in imageList" :key="index">
+							<image :src="item.url" mode="aspectFill" class="item-image" :alt="item.alt"></image>
+						</view>
+					</view>
+
+					<!-- 复制一份列表用于无缝衔接 -->
+					<view class="image-list copy-list" catchtouchmove="return false">
+						<view class="image-item" v-for="(item, index) in imageList" :key="'copy-' + index">
+							<image :src="item.url" mode="aspectFill" class="item-image" :alt="item.alt"></image>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+		</view>
+
+
 		<view class="center" @click="openReceivePop"
 			style="width: 386rpx; height: 102rpx; background-color: #0877FF; border-radius: 16rpx; position: absolute; bottom: 200rpx;">
 			<text style="font-size: 35rpx; color: white;">设备专属权益兑换</text>
@@ -170,8 +196,56 @@
 				createTime: "",
 				number: "",
 				model: "",
-				recordList: []
+				recordList: [],
+				// 图片数据
+				imageList: [{
+						url: 'https://picsum.photos/300/200?random=1',
+						alt: '图片1'
+					},
+					{
+						url: 'https://picsum.photos/300/200?random=2',
+						alt: '图片2'
+					},
+					{
+						url: 'https://picsum.photos/300/200?random=3',
+						alt: '图片3'
+					},
+					{
+						url: 'https://picsum.photos/300/200?random=4',
+						alt: '图片4'
+					},
+					{
+						url: 'https://picsum.photos/300/200?random=5',
+						alt: '图片5'
+					},
+					{
+						url: 'https://picsum.photos/300/200?random=6',
+						alt: '图片6'
 					}
+				],
+				scrollTimer: null, // 滚动定时器
+				scrollSpeed: 1, // 滚动速度 (px/帧)
+				translateX: 0, // 位移量
+				listWidth: 0, // 列表宽度
+				isScrolling: false // 是否正在滚动
+			}
+		},
+
+		onReady() {
+			// 获取列表宽度
+			this.$nextTick(() => {
+				const query = uni.createSelectorQuery().in(this);
+				query.select('.image-list').boundingClientRect(data => {
+					this.listWidth = data.width;
+					// 开始自动滚动
+					this.startAutoScroll();
+				}).exec();
+			});
+		},
+
+		onUnload() {
+			// 页面卸载时清除定时器
+			this.stopAutoScroll();
 		},
 
 		methods: {
@@ -448,13 +522,46 @@
 						}
 					});
 				}
+			},
+
+
+			// 开始自动滚动
+			startAutoScroll() {
+				this.stopAutoScroll(); // 先清除已有定时器
+
+				// 每16ms滚动一次 (约60帧/秒)
+				this.scrollTimer = setInterval(() => {
+					this.translateX -= this.scrollSpeed;
+
+					// 当滚动距离达到一个列表宽度时，重置位置实现无缝滚动
+					if (Math.abs(this.translateX) >= this.listWidth) {
+						this.translateX = 0;
 					}
 
+					this.isScrolling = true;
+				}, 16);
+			},
+
+			// 停止自动滚动
+			stopAutoScroll() {
+				if (this.scrollTimer) {
+					clearInterval(this.scrollTimer);
+					this.scrollTimer = null;
+					this.isScrolling = false;
+				}
+			},
+
+			// 监听滚动事件 (用于鼠标悬停暂停)
+			onScroll() {
+				// 可以在这里处理手动滚动后的逻辑
+			}
+
+
 		}
 	}
 </script>
 
-<style>
+<style scoped>
 	.content {
 		width: 100%;
 		height: 100vh;
@@ -472,4 +579,40 @@
 		border-bottom: 0.86px solid #e3e3e3;
 
 	}
+
+	.auto-scroll-container {
+		width: 100%;
+		overflow: hidden;
+		/* 隐藏滚动条 */
+		padding: 20rpx 0;
+	}
+
+	.scroll-view {
+		width: 100%;
+		white-space: nowrap;
+		/* 防止换行 */
+	}
+
+	.scroll-content {
+		display: flex;
+	}
+
+	.image-list {
+		display: flex;
+		flex-direction: row;
+	}
+
+	.image-item {
+		width: 240rpx;
+		height: 200rpx;
+		margin-right: 20rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
+	}
+
+	.item-image {
+		width: 100%;
+		height: 100%;
+		display: block;
+	}
 </style>

unpackage/dist/dev/mp-weixin/common/vendor.js

@@ -7042,7 +7042,7 @@ function isConsoleWritable() {
 function initRuntimeSocketService() {
   const hosts = "172.23.128.1,192.168.1.7,192.168.195.32,127.0.0.1";
   const port = "8090";
-  const id = "mp-weixin_r5vw4B";
+  const id = "mp-weixin_1ZEevH";
   const lazy = typeof swan !== "undefined";
   let restoreError = lazy ? () => {
   } : initOnError();

unpackage/dist/dev/mp-weixin/pages/index/index.js

@@ -28,9 +28,58 @@ const _sfc_main = {
       createTime: "",
       number: "",
       model: "",
-      recordList: []
+      recordList: [],
+      // 图片数据
+      imageList: [
+        {
+          url: "https://picsum.photos/300/200?random=1",
+          alt: "图片1"
+        },
+        {
+          url: "https://picsum.photos/300/200?random=2",
+          alt: "图片2"
+        },
+        {
+          url: "https://picsum.photos/300/200?random=3",
+          alt: "图片3"
+        },
+        {
+          url: "https://picsum.photos/300/200?random=4",
+          alt: "图片4"
+        },
+        {
+          url: "https://picsum.photos/300/200?random=5",
+          alt: "图片5"
+        },
+        {
+          url: "https://picsum.photos/300/200?random=6",
+          alt: "图片6"
+        }
+      ],
+      scrollTimer: null,
+      // 滚动定时器
+      scrollSpeed: 1,
+      // 滚动速度 (px/帧)
+      translateX: 0,
+      // 位移量
+      listWidth: 0,
+      // 列表宽度
+      isScrolling: false
+      // 是否正在滚动
     };
   },
+  onReady() {
+    this.$nextTick(() => {
+      const query = common_vendor.index.createSelectorQuery().in(this);
+      query.select(".image-list").boundingClientRect((data) => {
+        this.listWidth = data.width;
+        this.startAutoScroll();
+      }).exec();
+    });
+  },
+  onUnload() {
+    this.stopAutoScroll();
+  },
   methods: {
     request(url, method, data) {
       return new Promise((resolve, reject) => {
@@ -45,7 +94,7 @@ const _sfc_main = {
           header,
           timeout: 1e4,
           success: (res) => {
-            common_vendor.index.__f__("log", "at pages/index/index.vue:193", "API响应:", res);
+            common_vendor.index.__f__("log", "at pages/index/index.vue:267", "API响应:", res);
             if (res.statusCode === 200) {
               resolve(res.data);
             } else {
@@ -53,7 +102,7 @@ const _sfc_main = {
             }
           },
           fail: (err) => {
-            common_vendor.index.__f__("error", "at pages/index/index.vue:201", "API请求失败:", err);
+            common_vendor.index.__f__("error", "at pages/index/index.vue:275", "API请求失败:", err);
             reject(err);
           }
         });
@@ -61,7 +110,7 @@ const _sfc_main = {
     },
     async getConfig() {
       const res = await this.request("config", "get", {});
-      common_vendor.index.__f__("log", "at pages/index/index.vue:209", res);
+      common_vendor.index.__f__("log", "at pages/index/index.vue:283", res);
       if (res.home != "") {
         this.bg = res.home;
       }
@@ -89,13 +138,13 @@ const _sfc_main = {
           if (res.code == 200) {
             common_vendor.index.setStorageSync("user_id", res.data.user_id);
             this.userId = res.data.user_id;
-            common_vendor.index.__f__("log", "at pages/index/index.vue:238", "登录成功, userId:", this.userId);
+            common_vendor.index.__f__("log", "at pages/index/index.vue:312", "登录成功, userId:", this.userId);
           } else {
-            common_vendor.index.__f__("error", "at pages/index/index.vue:240", "登录失败:", res.message);
+            common_vendor.index.__f__("error", "at pages/index/index.vue:314", "登录失败:", res.message);
           }
         }
       } catch (error) {
-        common_vendor.index.__f__("error", "at pages/index/index.vue:244", "登录过程出错:", error);
+        common_vendor.index.__f__("error", "at pages/index/index.vue:318", "登录过程出错:", error);
       }
     },
     openReceivePop() {
@@ -114,11 +163,11 @@ const _sfc_main = {
           title: "加载中..."
         });
         const result = await this.request("getRecord?userId=" + this.userId, "GET", {});
-        common_vendor.index.__f__("log", "at pages/index/index.vue:267", result);
+        common_vendor.index.__f__("log", "at pages/index/index.vue:341", result);
         this.recordList = result.data;
-        common_vendor.index.__f__("log", "at pages/index/index.vue:272", "加载领取记录...");
+        common_vendor.index.__f__("log", "at pages/index/index.vue:346", "加载领取记录...");
       } catch (error) {
-        common_vendor.index.__f__("error", "at pages/index/index.vue:274", "加载领取记录失败:", error);
+        common_vendor.index.__f__("error", "at pages/index/index.vue:348", "加载领取记录失败:", error);
       }
       common_vendor.index.hideLoading();
     },
@@ -134,14 +183,14 @@ const _sfc_main = {
           base64,
           path
         } = await common_utils.processImage();
-        common_vendor.index.__f__("log", "at pages/index/index.vue:293", "最终Base64长度:", base64.length, path);
+        common_vendor.index.__f__("log", "at pages/index/index.vue:367", "最终Base64长度:", base64.length, path);
         this.imagePath = path;
         this.base64 = base64;
         common_vendor.index.showToast({
           title: "上传成功"
         });
       } catch (err) {
-        common_vendor.index.__f__("error", "at pages/index/index.vue:300", "处理失败", err);
+        common_vendor.index.__f__("error", "at pages/index/index.vue:374", "处理失败", err);
         common_vendor.index.showToast({
           title: "处理失败",
           icon: "none"
@@ -229,7 +278,7 @@ const _sfc_main = {
           ProductImage: this.base64
         };
         const result = await this.request("addRecord", "POST", formData);
-        common_vendor.index.__f__("log", "at pages/index/index.vue:395", result);
+        common_vendor.index.__f__("log", "at pages/index/index.vue:469", result);
         if (result.code == 200) {
           common_vendor.index.showToast({
             title: "提交成功，请等待审核",
@@ -250,7 +299,7 @@ const _sfc_main = {
           title: "提交失败，请重试",
           icon: "none"
         });
-        common_vendor.index.__f__("error", "at pages/index/index.vue:418", "提交失败:", error);
+        common_vendor.index.__f__("error", "at pages/index/index.vue:492", "提交失败:", error);
       }
     },
     clearForm() {
@@ -270,10 +319,10 @@ const _sfc_main = {
           current: this.imagePath,
           urls: [this.imagePath],
           success: function(res) {
-            common_vendor.index.__f__("log", "at pages/index/index.vue:440", "预览图片成功");
+            common_vendor.index.__f__("log", "at pages/index/index.vue:514", "预览图片成功");
           },
           fail: function(err) {
-            common_vendor.index.__f__("error", "at pages/index/index.vue:443", "预览图片失败:", err);
+            common_vendor.index.__f__("error", "at pages/index/index.vue:517", "预览图片失败:", err);
             common_vendor.index.showToast({
               title: "预览失败",
               icon: "none"
@@ -281,6 +330,28 @@ const _sfc_main = {
           }
         });
       }
+    },
+    // 开始自动滚动
+    startAutoScroll() {
+      this.stopAutoScroll();
+      this.scrollTimer = setInterval(() => {
+        this.translateX -= this.scrollSpeed;
+        if (Math.abs(this.translateX) >= this.listWidth) {
+          this.translateX = 0;
+        }
+        this.isScrolling = true;
+      }, 16);
+    },
+    // 停止自动滚动
+    stopAutoScroll() {
+      if (this.scrollTimer) {
+        clearInterval(this.scrollTimer);
+        this.scrollTimer = null;
+        this.isScrolling = false;
+      }
+    },
+    // 监听滚动事件 (用于鼠标悬停暂停)
+    onScroll() {
     }
   }
 };
@@ -304,39 +375,55 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
       ["background-color"]: "transparent",
       color: "#000"
     }),
-    c: common_vendor.o((...args) => $options.openReceivePop && $options.openReceivePop(...args)),
+    c: common_vendor.f($data.imageList, (item, index, i0) => {
-    d: common_vendor.o((...args) => $options.openRecordPop && $options.openRecordPop(...args)),
+      return {
-    e: $data.name,
+        a: item.url,
-    f: common_vendor.o(($event) => $data.name = $event.detail.value),
+        b: item.alt,
-    g: $data.phone,
+        c: index
-    h: common_vendor.o(($event) => $data.phone = $event.detail.value),
+      };
-    i: $data.workUnit,
+    }),
-    j: common_vendor.o(($event) => $data.workUnit = $event.detail.value),
+    d: common_vendor.f($data.imageList, (item, index, i0) => {
-    k: -1,
+      return {
-    l: $data.address,
+        a: item.url,
-    m: common_vendor.o(($event) => $data.address = $event.detail.value),
+        b: item.alt,
-    n: $data.model,
+        c: "copy-" + index
-    o: common_vendor.o(($event) => $data.model = $event.detail.value),
+      };
-    p: $data.number,
+    }),
-    q: common_vendor.o(($event) => $data.number = $event.detail.value),
+    e: `translateX(${$data.translateX}px)`,
-    r: $data.createTime,
+    f: common_vendor.o((...args) => $options.onScroll && $options.onScroll(...args)),
-    s: common_vendor.o(($event) => $data.createTime = $event.detail.value),
+    g: common_vendor.o((...args) => $options.openReceivePop && $options.openReceivePop(...args)),
-    t: common_vendor.o((...args) => $options.seleImg && $options.seleImg(...args)),
+    h: common_vendor.o((...args) => $options.openRecordPop && $options.openRecordPop(...args)),
-    v: $data.imagePath
+    i: $data.name,
+    j: common_vendor.o(($event) => $data.name = $event.detail.value),
+    k: $data.phone,
+    l: common_vendor.o(($event) => $data.phone = $event.detail.value),
+    m: $data.workUnit,
+    n: common_vendor.o(($event) => $data.workUnit = $event.detail.value),
+    o: -1,
+    p: $data.address,
+    q: common_vendor.o(($event) => $data.address = $event.detail.value),
+    r: $data.model,
+    s: common_vendor.o(($event) => $data.model = $event.detail.value),
+    t: $data.number,
+    v: common_vendor.o(($event) => $data.number = $event.detail.value),
+    w: $data.createTime,
+    x: common_vendor.o(($event) => $data.createTime = $event.detail.value),
+    y: common_vendor.o((...args) => $options.seleImg && $options.seleImg(...args)),
+    z: $data.imagePath
   }, $data.imagePath ? {
-    w: $data.imagePath,
+    A: $data.imagePath,
-    x: common_vendor.o((...args) => $options.previewImage && $options.previewImage(...args))
+    B: common_vendor.o((...args) => $options.previewImage && $options.previewImage(...args))
   } : {}, {
-    y: common_vendor.o((...args) => $options.closeReceivePop && $options.closeReceivePop(...args)),
+    C: common_vendor.o((...args) => $options.closeReceivePop && $options.closeReceivePop(...args)),
-    z: common_vendor.o((...args) => $options.submitForm && $options.submitForm(...args)),
+    D: common_vendor.o((...args) => $options.submitForm && $options.submitForm(...args)),
-    A: common_vendor.sr("receivePop", "8f702d68-1"),
+    E: common_vendor.sr("receivePop", "1cf27b2a-1"),
-    B: common_vendor.p({
+    F: common_vendor.p({
       type: "center",
       ["is-mask-click"]: false
     }),
-    C: common_assets._imports_0,
+    G: common_assets._imports_0,
-    D: common_vendor.o(($event) => $options.closeRecordPop()),
+    H: common_vendor.o(($event) => $options.closeRecordPop()),
-    E: common_vendor.f($data.recordList, (item, k0, i0) => {
+    I: common_vendor.f($data.recordList, (item, k0, i0) => {
       return {
         a: common_vendor.t(item.name),
         b: common_vendor.t(item.phone),
@@ -345,12 +432,12 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         e: item.phone + item.time
       };
     }),
-    F: common_vendor.sr("recordPop", "8f702d68-2"),
+    J: common_vendor.sr("recordPop", "1cf27b2a-2"),
-    G: common_vendor.p({
+    K: common_vendor.p({
       type: "center"
     })
   });
 }
-const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render]]);
+const MiniProgramPage = /* @__PURE__ */ common_vendor._export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1cf27b2a"]]);
 wx.createPage(MiniProgramPage);
 //# sourceMappingURL=../../../.sourcemap/mp-weixin/pages/index/index.js.map

unpackage/dist/dev/mp-weixin/pages/index/index.wxss

@@ -1,5 +1,5 @@
 
-.content {
+.content.data-v-1cf27b2a {
 		width: 100%;
 		height: 100vh;
 		display: flex;
@@ -8,9 +8,39 @@
 		justify-content: center;
 		position: relative;
 }
-.line {
+.line.data-v-1cf27b2a {
 		width: 90%;
 		justify-content: center;
 		margin-top: 20rpx;
 		border-bottom: 0.86px solid #e3e3e3;
 }
+.auto-scroll-container.data-v-1cf27b2a {
+		width: 100%;
+		overflow: hidden;
+		/* 隐藏滚动条 */
+		padding: 20rpx 0;
+}
+.scroll-view.data-v-1cf27b2a {
+		width: 100%;
+		white-space: nowrap;
+		/* 防止换行 */
+}
+.scroll-content.data-v-1cf27b2a {
+		display: flex;
+}
+.image-list.data-v-1cf27b2a {
+		display: flex;
+		flex-direction: row;
+}
+.image-item.data-v-1cf27b2a {
+		width: 240rpx;
+		height: 200rpx;
+		margin-right: 20rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
+}
+.item-image.data-v-1cf27b2a {
+		width: 100%;
+		height: 100%;
+		display: block;
+}