From de4b510c00453c954b1eb57a1118816bededf673 Mon Sep 17 00:00:00 2001
From: ZF sun <34314687@qq.com>
Date: Mon, 15 Jun 2026 14:35:17 +0800
Subject: [PATCH] =?UTF-8?q?refactor(article-component):=20=E6=9B=BF?=
 =?UTF-8?q?=E6=8D=A2swiper=E4=B8=BAscroll-view=E5=AE=9E=E7=8E=B0=E8=87=AA?=
 =?UTF-8?q?=E5=8A=A8=E6=BB=9A=E5=8A=A8=EF=BC=8C=E4=BC=98=E5=8C=96=E7=B4=A7?=
 =?UTF-8?q?=E5=87=91=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

1.  将原swiper自动滚动方案替换为scroll-view实现，支持item自然高度，不再强制等高，解决短item下方留白问题
2.  新增连贯滚动和步进滚动两种自动滚动模式，适配不同场景需求
3.  修复H5端rpx单位不兼容问题，统一内联样式单位转换逻辑
4.  优化滚动容器高度计算，根据配置显示数量动态计算窗口高度
5.  新增触摸暂停恢复逻辑，提升用户交互体验
---
 components-diy/diy-article.vue | 460 ++++++++++++++++++++++++++-------
 1 file changed, 366 insertions(+), 94 deletions(-)

diff --git a/components-diy/diy-article.vue b/components-diy/diy-article.vue
index be9fbcf..c0dc0de 100644
--- a/components-diy/diy-article.vue
+++ b/components-diy/diy-article.vue
@@ -3,53 +3,58 @@
 		<view class="article-wrap" :style="warpWrapStyle">
 			<!-- 注: :class 用内联数组,与 ns-newform 对齐;computed listClass/itemClass 已移除(避免数组 toString 用逗号 join 的问题) -->
 			<view :class="['list-wrap', value.style || 'style-1']">
-				<!-- 自动垂直滚动(默认开启,兼容老数据:无 scrollMode/swiperConfig 字段也走这里) -->
-				<swiper v-if="list.length > 0 && useScroll" class="auto-scroll-swiper"
-					:style="swiperWrapStyle"
-					:vertical="swiperConfig.vertical !== false"
-					:autoplay="swiperConfig.autoplay !== false"
-					:circular="swiperConfig.circular !== false"
-					:interval="swiperConfig.interval || 3000"
-					:duration="swiperConfig.duration || 500"
-					:display-multiple-items="safeDisplayMultipleItems">
-					<swiper-item v-for="(item, index) in list" :key="index" @tap.stop="toDetail(item)">
-						<view class="swiper-item-content">
-							<view :class="['item', value.ornament && value.ornament.type, !item.cover_img && value.style !== 'style-4' ? 'no-image' : '']" :style="itemStyle">
-								<!-- 封面图:无图时隐藏图位;style-4 纯文字始终不显示 -->
-								<view class="article-img" v-if="item.cover_img && value.style !== 'style-4'">
-									<image class="cover-img" :src="$util.img(item.cover_img)" mode="aspectFill"
-										@error="imgError(index)" show-menu-by-longpress></image>
+				<!-- 自动垂直滚动(scroll-view 实现,默认开启,兼容老数据:无 scrollMode/swiperConfig 字段也走这里)
+				     设计:item 自然高度 + 固定 itemGap,scrollTop 累加 + loopedList 复制实现无缝循环
+				     vs 旧 swiper 方案:旧方案用 min-height 强制等高 → 短 item 下方空一大块,不符合"紧凑"诉求
+				     新方案:item 完全用内容撑起,每条 item 后固定 itemGap 空白,视觉间距天然恒等 -->
+				<scroll-view v-if="list.length > 0 && useScroll" class="auto-scroll-list"
+					:style="autoScrollListStyle"
+					scroll-y="true"
+					:scroll-top="scrollTop"
+					:scroll-with-animation="scrollWithAnimation"
+					:show-scrollbar="false"
+					:enhanced="false"
+					:bounces="false"
+					:throttle="false"
+					@touchstart="onAutoScrollTouchStart"
+					@touchend="onAutoScrollTouchEnd">
+					<view v-for="(item, index) in loopedList" :key="index"
+						:class="['item', value.ornament && value.ornament.type, !item.cover_img && value.style !== 'style-4' ? 'no-image' : '']"
+						:style="itemStyle"
+						@tap.stop="toDetail(item)">
+						<!-- 封面图:无图时隐藏图位;style-4 纯文字始终不显示 -->
+						<view class="article-img" v-if="item.cover_img && value.style !== 'style-4'">
+							<image class="cover-img" :src="$util.img(item.cover_img)" mode="aspectFill"
+								@error="imgError(index % list.length)" show-menu-by-longpress></image>
+						</view>
+						<view class="info-wrap">
+							<text class="title">{{ item.article_title }}</text>
+							<text class="desc"
+								v-if="abstractStyle.support && abstractStyle.control && item.article_abstract">
+								{{ item.article_abstract }}
+							</text>
+							<view class="tag-list"
+								v-if="tagStyle.support && tagStyle.control && item.tag_names">
+								<text class="tag" v-for="(tn, ti) in tagArr(item.tag_names)" :key="ti">{{ tn }}</text>
+							</view>
+							<view class="read-wrap">
+								<block v-if="item.category_name">
+									<text class="category-icon"></text>
+									<text class="category-name">{{ item.category_name }}</text>
+								</block>
+								<view class="num" v-if="readNumStyle.support && readNumStyle.control">
+									<uni-icons type="eye" size="12" :color="metaColor" />
+									<text>{{ item.read_num || 0 }}</text>
 								</view>
-								<view class="info-wrap">
-									<text class="title">{{ item.article_title }}</text>
-									<text class="desc"
-										v-if="abstractStyle.support && abstractStyle.control && item.article_abstract">
-										{{ item.article_abstract }}
-									</text>
-									<view class="tag-list"
-										v-if="tagStyle.support && tagStyle.control && item.tag_names">
-										<text class="tag" v-for="(tn, ti) in tagArr(item.tag_names)" :key="ti">{{ tn }}</text>
-									</view>
-									<view class="read-wrap">
-										<block v-if="item.category_name">
-											<text class="category-icon"></text>
-											<text class="category-name">{{ item.category_name }}</text>
-										</block>
-										<view class="num" v-if="readNumStyle.support && readNumStyle.control">
-											<uni-icons type="eye" size="12" :color="metaColor" />
-											<text>{{ item.read_num || 0 }}</text>
-										</view>
-										<view class="num" v-if="dianzanStyle.support && dianzanStyle.control">
-											<uni-icons type="star" size="12" :color="metaColor" />
-											<text>{{ item.dianzan_num || 0 }}</text>
-										</view>
-										<text class="date" v-if="dateStyle.support && dateStyle.control">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
-									</view>
+								<view class="num" v-if="dianzanStyle.support && dianzanStyle.control">
+									<uni-icons type="star" size="12" :color="metaColor" />
+									<text>{{ item.dianzan_num || 0 }}</text>
 								</view>
+								<text class="date" v-if="dateStyle.support && dateStyle.control">{{ $util.timeStampTurnTime(item.create_time, 'date') }}</text>
 							</view>
 						</view>
-					</swiper-item>
-				</swiper>
+					</view>
+				</scroll-view>
 				<!-- 非滚动模式(scrollMode==='none')时的普通列表 -->
 				<template v-if="!useScroll">
 					<view v-for="(item, index) in list" :key="index" :class="['item', value.ornament && value.ornament.type, !item.cover_img && value.style !== 'style-4' ? 'no-image' : '']" :style="itemStyle"
@@ -123,16 +128,46 @@ export default {
 				headWidth: '160rpx',
 				headHeight: '160rpx',
 				textRows: 2
-			}
+			},
+			// ========== 滚动模式(scroll-view 自动滚动)状态 ==========
+			// scrollTop 累加驱动滚动;loopedList 把 list 复制一份实现无缝循环
+			scrollTop: 0,
+			autoScrollTimer: null,    // setTimeout(16ms) id(60fps tick,跨端平滑,替代 setInterval 30ms)
+			autoScrollResumeTimer: null, // touchend 后延迟恢复
+			_scrollAccumulator: 0,    // sub-pixel 累计,每帧 +0.4,到 ≥1 才提交 scrollTop
+			// ========== 步进模式(scroll-step + pause)状态 ==========
+			// 滚动一下 + 停留一会:每次把 scrollTop 推到下一个 item 起点,停 pauseDuration ms,再推下一个
+			// 跳回 0(列表末尾 → 列表开头)时也走 stopPause + 立即 0,视觉无感
+			_stepCurrentIndex: 0,     // 当前已显示到的 item 索引(0..N-1)
+			_stepPhase: 'idle',       // 'idle' | 'scrolling' | 'pausing'
+			_stepResetting: false     // true=正在跳回 0,scrollWithAnimation computed 翻成 false,本次 scrollTop=0 赋值无动画
 		};
 	},
 	created() {
 		this.getList();
 	},
+	mounted() {
+		// 自动滚动由 watch 'list.length' 在 list 加载完后启动(mounted 时 list 仍为空)
+	},
+	beforeDestroy() {
+		this.stopAutoScroll();
+		if (this.autoScrollResumeTimer) {
+			clearTimeout(this.autoScrollResumeTimer);
+			this.autoScrollResumeTimer = null;
+		}
+	},
 	watch: {
 		// 组件刷新监听
 		componentRefresh() {
 			this.getList();
+		},
+		// list 加载完后启动自动滚动(mounted 时 list 还是空,需监听 list 长度变化)
+		'list.length'(newLen) {
+			if (newLen > 1 && this.useScroll) {
+				this.$nextTick(() => {
+					this.startAutoScroll();
+				});
+			}
 		}
 	},
 	computed: {
@@ -167,39 +202,45 @@ export default {
 				// CSS 变量(向下传递给所有子元素,通过 var() 读取)
 				'--article-component-bg-color': v.componentBgColor || 'transparent',
 				'--article-element-bg-color': v.elementBgColor || 'transparent',
-				'--article-top-around-radius': isRootRound ? `${r(v.topAroundRadius, 0) * 2}rpx` : '0rpx',
-				'--article-bottom-around-radius': isRootRound ? `${r(v.bottomAroundRadius, 0) * 2}rpx` : '0rpx',
-				'--article-top-element-around-radius': isItemRound ? `${r(v.topElementAroundRadius, 0) * 2}rpx` : '0rpx',
-				'--article-bottom-element-around-radius': isItemRound ? `${r(v.bottomElementAroundRadius, 0) * 2}rpx` : '0rpx',
+				// ========== 关键:内联 style 的 rpx 在 H5 端浏览器不识别! ==========
+				// MP-WXSS 原生支持 rpx,内联 rpx 有效;H5 端 rpx 不是有效 CSS 单位,
+				// 直接写 "280rpx" 浏览器会忽略,导致 CSS 变量 / swiper 高度全失效。
+				// 全部改走 this._rpx(val),H5 转 vw(750rpx 设计宽度 → 100/750 vw),
+				// 其他端保留 rpx,与 CSS 文件(走 postcss 转换)对齐。
+				'--article-top-around-radius': this._rpx(isRootRound ? r(v.topAroundRadius, 0) * 2 : 0),
+				'--article-bottom-around-radius': this._rpx(isRootRound ? r(v.bottomAroundRadius, 0) * 2 : 0),
+				'--article-top-element-around-radius': this._rpx(isItemRound ? r(v.topElementAroundRadius, 0) * 2 : 0),
+				'--article-bottom-element-around-radius': this._rpx(isItemRound ? r(v.bottomElementAroundRadius, 0) * 2 : 0),
 				// 标签胶囊 3 色 + 字号(rpx)
 				'--article-tag-bg-color': tag.bgColor || '#f0f9ff',
 				'--article-tag-text-color': tag.textColor || '#1e6bb8',
 				'--article-tag-border-color': tag.borderColor || '#b3d8ff',
-				'--article-tag-font-size': r(tag.fontSize, 22) + 'rpx',
+				'--article-tag-font-size': this._rpx(r(tag.fontSize, 22)),
 				// 摘要文字色 + 字号(rpx)
 				'--article-abstract-color': abs.textColor || '#888888',
-				'--article-abstract-font-size': r(abs.fontSize, 24) + 'rpx',
+				'--article-abstract-font-size': this._rpx(r(abs.fontSize, 24)),
 				// 阅读区文字色 + 图标大小 + 文字大小(rpx)
 				'--article-meta-color': rw.color || '#999ca7',
-				'--article-meta-icon-size': r(rw.iconSize, 24) + 'rpx',
-				'--article-meta-font-size': r(rw.fontSize, 24) + 'rpx',
+				'--article-meta-icon-size': this._rpx(r(rw.iconSize, 24)),
+				'--article-meta-font-size': this._rpx(r(rw.fontSize, 24)),
 				// 查看更多字号 + 图标大小(rpx,统一走 r() 兜底,不再 typeof 区分)
-				'--article-view-more-font-size': r(vm.fontSize, 26) + 'rpx',
-				'--article-view-more-icon-size': r(vm.iconSize, 24) + 'rpx',
-				// 列表项间距(rpx)
-				'--article-item-gap': r(v.itemGap, 16) + 'rpx',
+				'--article-view-more-font-size': this._rpx(r(vm.fontSize, 26)),
+				'--article-view-more-icon-size': this._rpx(r(vm.iconSize, 24)),
+				// 列表项间距(rpx)— H5 端此值若失效,.swiper-item-content padding-bottom 变 0,item 直接贴一起
+				'--article-item-gap': this._rpx(r(v.itemGap, 16)),
 				// swiper 内 item 统一最小高度(rpx)= list 中最高 item 的自然高度
 				// CSS 中 .auto-scroll-swiper .item { min-height: var(--article-swiper-item-min-height) }
 				// 强制所有 item 高度统一,搭配 .swiper-item-content 的 padding-bottom = itemGap
 				// 制造恒定视觉间距,与 swiperHeight = (maxItemHeight + itemGap) × N 公式一致
-				'--article-swiper-item-min-height': this.maxItemHeight + 'rpx',
+				// H5 端此值若失效,fallback 200rpx 会让 item 高度统一卡死在 200rpx,有摘要 item 溢出被裁
+				'--article-swiper-item-min-height': this._rpx(this.maxItemHeight),
 				// 分割线颜色(主要用于 style-4)
 				'--article-divider-color': v.dividerColor || '#eeeeee',
 				// 标题字号 4 风格独立(rpx)
-				'--article-title-fs-1': tfs1 + 'rpx',
-				'--article-title-fs-2': tfs2 + 'rpx',
-				'--article-title-fs-3': tfs3 + 'rpx',
-				'--article-title-fs-4': tfs4 + 'rpx'
+				'--article-title-fs-1': this._rpx(tfs1),
+				'--article-title-fs-2': this._rpx(tfs2),
+				'--article-title-fs-3': this._rpx(tfs3),
+				'--article-title-fs-4': this._rpx(tfs4)
 			});
 		},
 		// 单项容器样式:背景 + 装饰(box-shadow / border)
@@ -211,19 +252,42 @@ export default {
 				'background-color': v.elementBgColor || 'transparent'
 			};
 			if (ornament.type === 'shadow') {
-				style['box-shadow'] = `0 0 10rpx ${ornament.color || 'rgba(0, 0, 0, 0.1)'}`;
+				// H5 端 rpx 失效,改走 _rpx()。10/2 是阴影模糊半径/边框宽度,与字号/间距共用同一单位
+				style['box-shadow'] = `0 0 ${this._rpx(10)} ${ornament.color || 'rgba(0, 0, 0, 0.1)'}`;
 			}
 			if (ornament.type === 'stroke') {
-				style['border'] = `2rpx solid ${ornament.color || 'transparent'}`;
+				style['border'] = `${this._rpx(2)} solid ${ornament.color || 'transparent'}`;
 			}
 			return this.$util.objToStyle(style);
 		},
-		// swiper 容器高度(由 swiperHeight 计算属性驱动)
-		swiperWrapStyle() {
+		// 滚动容器高度(scroll-view 用)
+		// 语义:窗口显示「前 N 个 item 的实际自然高度」,严格匹配后端 displayMultipleItems 配置
+		//   N = safeDisplayMultipleItems
+		//   高度 = sum(前 N 个 item 的 _itemHeight) + (N-1) × itemGap
+		// 之前用 maxItemHeight(全 list 最高一件) × N + buffer:短 item 多塞,长 item 溢出,可见行数随内容漂移
+		// 现在:前 N 个 item 的真实高度之和 → 窗口里就是 N 行,所见即所配
+		// 边界:list 尚未加载时(list 空)走 _staticMaxItemHeight() × N 兜底,保持初始可见区域
+		autoScrollListStyle() {
 			return this.$util.objToStyle({
-				height: `${this.swiperHeight}rpx`
+				height: this._rpx(this._visibleWindowHeight)
 			});
 		},
+		// 可见窗口高度(rpx) — 即 scroll-view 容器高度
+		_visibleWindowHeight() {
+			if (!this.list || this.list.length === 0) {
+				// 兜底:用静态最高 item × N 估算,保证初始有可见区域
+				return this._staticMaxItemHeight() * this.safeDisplayMultipleItems;
+			}
+			var n = this.safeDisplayMultipleItems;
+			var gap = this._num(this.value.itemGap, 16);
+			// 取前 N 个 item 的自然高度之和(list 不足 N 时全取)
+			var count = Math.min(n, this.list.length);
+			var sum = 0;
+			for (var i = 0; i < count; i++) {
+				sum += this._itemHeight(this.list[i]);
+			}
+			return sum + (count - 1) * gap;
+		},
 		// 查看更多样式(颜色由 viewMore.color 控制)
 		viewMoreStyle() {
 			return this.$util.objToStyle({
@@ -273,12 +337,39 @@ export default {
 		useScroll() {
 			return this.scrollMode !== 'none' && this.list.length > 1;
 		},
+		// scroll-view 的 scroll-with-animation 绑定
+		//   连贯模式: false(每帧 scrollTop += 1 同步生效,避免被 200ms 缓动打断造成频闪)
+		//   步进模式:
+		//     - 推进中(scrolling 阶段,推 scrollTop 到下一个 item 起点): true(走 300-500ms 缓动,视觉是「滚一下」)
+		//     - 跳回 0 那一瞬(从 list 末尾 → 第二份 item 0 / 直接跳到 0): false(无动画,避免「向前滚回」)
+		//     - 暂停中(pausing 阶段): 当前 scrollTop 不动,binding 值无影响
+		// 实现:_stepResetting 标志位标识「正在跳回 0,本次 scrollTop 赋值不要动画」
+		scrollWithAnimation() {
+			if (!this.stepPauseEnabled) return false;
+			// 步进模式:正在跳回 0 时返回 false,否则 true
+			return !this._stepResetting;
+		},
 		// 安全的 display-multiple-items(确保不大于实际 list 长度,避免 swiper 报错)
 		safeDisplayMultipleItems() {
 			var displayCount = this.swiperConfig.displayMultipleItems || 3;
 			var actualCount = this.list.length;
 			return actualCount > 0 ? Math.min(displayCount, actualCount) : 1;
 		},
+		// 是否启用「滚动一下 + 停留一会」步进模式
+		// 默认 false(走 sub-pixel 连贯滚动);true 时按 item 粒度滚动,每滚一个 item 停 pauseDuration ms 再滚下一个
+		stepPauseEnabled() {
+			return !!this.swiperConfig.stepPause;
+		},
+		// 步进模式停留时长(ms),默认 1500
+		pauseDuration() {
+			var d = parseInt(this.swiperConfig.pauseDuration);
+			return d > 0 ? d : 1500;
+		},
+		// 步进模式单次滚动动画时长(ms),默认 500(uni-app scroll-view 默认动画 300ms,留 buffer)
+		stepAnimDuration() {
+			var d = parseInt(this.swiperConfig.stepAnimDuration);
+			return d > 0 ? d : 500;
+		},
 		// swiper 高度(rpx)优先级:
 		//   1. 老/新数据显式设置了 swiperConfig.swiperHeight(>0) → 配置值(用户强制覆盖)
 		//   2. 否则按 (maxItemHeight + itemGap) × N 计算(精确,不加分摊 buffer),其中:
@@ -310,6 +401,37 @@ export default {
 				return this._itemHeight(item);
 			}.bind(this)));
 		},
+		// ========== scroll-view 自动滚动 配套 computed ==========
+		// 滚动列表(复制一份用于无缝循环):scrollTop 滚到第一份底部时跳回 0,视觉上接续
+		loopedList() {
+			if (!this.list || this.list.length === 0) return [];
+			return this.list.concat(this.list);
+		},
+		// 单份 list 的总高度(rpx)= sum(各 item 自然高) + (N-1) × itemGap
+		// 重置 scrollTop 用:当 scrollTop 累加到 ≥ 此值,说明已经滚完第一份,跳回 0 视觉无感
+		firstListHeight() {
+			if (!this.list || this.list.length === 0) return 0;
+			var gap = this._num(this.value.itemGap, 16);
+			var sum = 0;
+			for (var i = 0; i < this.list.length; i++) {
+				sum += this._itemHeight(this.list[i]);
+			}
+			return sum + (this.list.length - 1) * gap;
+		},
+		// item 索引 i 的累计顶部偏移(rpx)= sum(items[0..i-1].height) + i × gap
+		// 步进模式用:把 scrollTop 推到 _itemOffset(i) 即「item i 顶部贴窗口顶部」
+		// loopedList[i+N] 位置 = firstListHeight + _itemOffset(i),即「第一份末尾之后接续」
+		_itemOffsetArr() {
+			if (!this.list || this.list.length === 0) return [];
+			var gap = this._num(this.value.itemGap, 16);
+			var arr = [];
+			var sum = 0;
+			for (var i = 0; i < this.list.length; i++) {
+				arr.push(sum);
+				sum += this._itemHeight(this.list[i]) + gap;
+			}
+			return arr;
+		},
 		// 注: :class 一律在模板里用 :class="['static', dynamic]" 内联数组写法
 		// 不再用 listClass/itemClass computed (computed 返回 array 时,uni-app WXML 编译
 		// 输出 {{[listClass]}},运行时 toString 用逗号 join,产生 "list-wrap,style-1" 错误 class)
@@ -321,6 +443,17 @@ export default {
 			var n = parseInt(v);
 			return isNaN(n) ? fb : n;
 		},
+		// 内联 style 单位归一化:H5 端 rpx 不是合法 CSS 单位,转 vw;其他端保留 rpx
+		// 设计宽度按 750rpx(uni-app 默认),转换 1rpx = 100/750 vw
+		// 关键:这个方法只用于内联 :style 绑定,CSS 文件里的 rpx 走 postcss 转换,不用管
+		_rpx(val) {
+			// #ifdef H5
+			return (val * 100 / 750) + 'vw';
+			// #endif
+			// #ifndef H5
+			return val + 'rpx';
+			// #endif
+		},
 		// ========== 动态 perRow 估算(swiperHeight 用) ==========
 		// 估算单条 item 的自然高度(rpx),考虑:
 		//   - style 决定图片高度 / info-wrap 宽度 / padding
@@ -474,6 +607,156 @@ export default {
 				...this.list[index],
 				cover_img: ''
 			});
+		},
+		// ========== scroll-view 自动滚动控制(两种模式互不干扰) ==========
+		// 模式 1: 连贯滚动(sub-pixel + 16ms tick) — 默认
+		//   设计目标:消除微信小程序「频闪」 + 跨端统一平滑滚动
+		//   旧方案(频闪根因):setInterval(30ms) + scrollTop += 1 + scroll-with-animation="true"
+		//     - 30ms ≈ 33fps,与屏幕 60fps 不同步,出现周期性跳帧
+		//     - scroll-with-animation 让每次 scrollTop 变化都跑 200ms 缓动,30ms 内动画未完成又被打断
+		//     - MP-WXSS scroll-view 渲染管线压力大,叠加动画 → 肉眼可见 1 像素级跳变
+		//   新方案:
+		//     - setTimeout(16ms) tick(60fps):跨端一致(MP 无全局 rAF,setTimeout 跨端可用)
+		//     - 每帧累加 0.4px(sub-pixel 抗锯齿),到 ≥ 1 才提交 scrollTop(避免每帧触发 vue 响应式)
+		//     - scroll-with-animation="false":scrollTop 同步生效,不启动 200ms 缓动
+		//     - 跳回 0 用 scrollTop 强制赋值,无动画 → 视觉无感
+		//     - 速度: 0.4 × 60 = 24 px/秒,慢速平稳
+		//
+		// 模式 2: 步进滚动(滚一下 + 停留一会) — 后端 stepPause=true 时启用
+		//   语义:每滚一个 item 停 pauseDuration ms 再滚下一个,循环接续
+		//   状态机: idle → scrolling(scrollTop 推到下一个 item 起点,scroll-with-animation=true) →
+		//           pausing(setTimeout(pauseDuration)) → scrolling(下一个) → ...
+		//   跳回 0(末尾 → 开头):scrolling phase 立即把 scrollTop 设为 0(scroll-with-animation 关),视觉无感
+		//   步进模式用 scroll-with-animation=true 是关键:每次推 scrollTop 是「滚一下」动画,不是直接跳
+		//
+		// 启动/暂停/恢复(两种模式共用):
+		//   - 启动:startAutoScroll 根据 stepPauseEnabled 分发
+		//   - 暂停:触摸时 stopAutoScroll,清除 resume timer
+		//   - 恢复:触摸结束 2s 后再 startAutoScroll
+		//   - 销毁:beforeDestroy 清 setTimeout
+		_scrollTick() {
+			// 模式 1 连贯滚动 tick
+			var STEP = 0.4;
+			this._scrollAccumulator += STEP;
+			if (this._scrollAccumulator >= 1) {
+				var inc = Math.floor(this._scrollAccumulator);
+				this._scrollAccumulator -= inc;
+				this.scrollTop += inc;
+				// 滚到第一份底部,跳回 0
+				if (this.firstListHeight > 0 && this.scrollTop >= this.firstListHeight) {
+					this.scrollTop = 0;
+				}
+			}
+			// 下一帧
+			var self = this;
+			this.autoScrollTimer = setTimeout(function() {
+				self._scrollTick();
+			}, 16);
+		},
+		// 模式 2 步进滚动:推 scrollTop 到下一个 item 起点,停 pauseDuration,再推下一个,循环接续
+		// 循环处理:list 末尾 → 跳回 0
+		//   翻 _stepResetting = true → scrollWithAnimation computed 翻成 false →
+		//   $nextTick 等 scroll-view 接受新 prop → scrollTop = 0(无动画)→ 50ms 后翻回 → 继续推下一个
+		// 状态机: idle → scrolling(scrollTop 推到下一个 item 起点,scroll-with-animation=true 走缓动) →
+		//         pausing(setTimeout(pauseDuration)) → scrolling(下一个) → ...
+		_stepAdvance() {
+			var offsets = this._itemOffsetArr;
+			if (offsets.length === 0) {
+				this._stepPhase = 'idle';
+				return;
+			}
+			var n = offsets.length;
+			var nextIndex = this._stepCurrentIndex + 1;
+			var isLoop = false;
+			if (nextIndex >= n) {
+				// 末尾 → 跳回开头(无动画,scrollTop 设为 0)
+				nextIndex = 0;
+				isLoop = true;
+			}
+			this._stepCurrentIndex = nextIndex;
+			this._stepPhase = 'scrolling';
+			var self = this;
+			if (isLoop) {
+				// 翻 _stepResetting 让 scroll-with-animation=false,scrollTop 设为 0
+				this._stepResetting = true;
+				this.$nextTick(function() {
+					self.scrollTop = 0;
+					// 等 50ms 让 scroll-view 接受新位置,再翻回
+					self.autoScrollTimer = setTimeout(function() {
+						self._stepResetting = false;
+						self._stepPhase = 'scrolling';
+						self._stepAdvance();
+					}, 50);
+				});
+				return;
+			}
+			// 正常推进:scrollTop 推到下一个 item 起点(scroll-with-animation=true 走 300-500ms 缓动)
+			this.scrollTop = offsets[nextIndex];
+			// 等动画结束 → 进入 pausing
+			this.autoScrollTimer = setTimeout(function() {
+				self._stepPhase = 'pausing';
+				self.autoScrollTimer = setTimeout(function() {
+					self._stepPhase = 'scrolling';
+					self._stepAdvance();
+				}, self.pauseDuration);
+			}, this.stepAnimDuration);
+		},
+		startAutoScroll() {
+			if (this.autoScrollTimer) return;
+			if (!this.list || this.list.length <= 1) return;
+			if (this.stepPauseEnabled) {
+				// 模式 2 步进:从 item 0 开始,首次立刻滚到 item 1(scroll-with-animation=true 走缓动)
+				this._stepCurrentIndex = 0;
+				this._stepPhase = 'scrolling';
+				this.scrollTop = 0;
+				var self = this;
+				// 首次立即推进(不预先 pause,符合「滚一下 + 停留一会」语义)
+				this.autoScrollTimer = setTimeout(function() {
+					self._stepAdvance();
+				}, 16);
+			} else {
+				// 模式 1 连贯
+				this._scrollAccumulator = 0;
+				var self = this;
+				this.autoScrollTimer = setTimeout(function() {
+					self._scrollTick();
+				}, 16);
+			}
+		},
+		stopAutoScroll() {
+			if (this.autoScrollTimer) {
+				clearTimeout(this.autoScrollTimer);
+				this.autoScrollTimer = null;
+			}
+			this._stepPhase = 'idle';
+		},
+		// 用户触摸 → 暂停自动滚动(touchend 2s 后由 onTouchEnd 恢复)
+		onAutoScrollTouchStart() {
+			this.stopAutoScroll();
+			if (this.autoScrollResumeTimer) {
+				clearTimeout(this.autoScrollResumeTimer);
+				this.autoScrollResumeTimer = null;
+			}
+		},
+		// 用户松手 → 2s 后恢复自动滚动(给用户阅读时间)
+		// 步进模式:不重置 _stepCurrentIndex,从用户松手时所在 item 继续滚下一个
+		// 连贯模式:正常重启 _scrollTick
+		onAutoScrollTouchEnd() {
+			if (this.autoScrollResumeTimer) clearTimeout(this.autoScrollResumeTimer);
+			var self = this;
+			this.autoScrollResumeTimer = setTimeout(function() {
+				if (self.stepPauseEnabled) {
+					// 步进模式:保留 _stepCurrentIndex,从 pausing 阶段继续
+					self._stepPhase = 'pausing';
+					self.autoScrollTimer = setTimeout(function() {
+						self._stepPhase = 'scrolling';
+						self._stepAdvance();
+					}, self.pauseDuration);
+				} else {
+					// 连贯模式:正常启动
+					self.startAutoScroll();
+				}
+			}, 2000);
 		}
 	}
 };
@@ -515,37 +798,25 @@ export default {
 	border-bottom-right-radius: var(--article-bottom-around-radius, 0);
 
 	.list-wrap {
-		// 垂直滚动 swiper
-		.auto-scroll-swiper {
+		// ============ 自动垂直滚动(scroll-view 实现) ============
+		// 设计目标:item 紧凑(自然高度) + 间距恒定(itemGap)
+		// 实现方式:item 走基础 .item 规则的 margin-bottom: var(--article-item-gap),
+		//   不再强制 min-height 让 item 用内容撑起,短 item 不会被拉高产生空白。
+		//   scrollTop 累加 + loopedList 复制一份实现无缝循环滚动。
+		// vs 旧 swiper 方案:旧方案用 min-height 强制等高 + swiper-item-content padding-bottom 制造间距,
+		//   导致短 item 下方空一大块(违反"紧凑"诉求);新方案天然紧凑。
+		.auto-scroll-list {
 			width: 100%;
 
-			// swiper-item-content:padding-bottom = itemGap 是制造 item 间恒定视觉间距的关键
-			// 不管 item 自然高度多少,两条 item 之间的空白永远是 itemGap,
-			// 而非「perRow - itemHeight」(后者随 item 高度变,间距不可控)。
-			// 顶部不补 padding,避免与 item padding 叠加导致裁切。
-			// 兜底:overflow:hidden 处理内容意外超过 maxItemHeight 的边界场景(防破坏布局)
-			.swiper-item-content {
-				padding-top: 0;
-				padding-right: 0;
-				padding-bottom: var(--article-item-gap, 16rpx);
-				padding-left: 0;
-				box-sizing: border-box;
-				overflow: hidden;
-			}
-
-			// swiper 内 item:
-			//   1. margin-bottom: 0 — 间距由 .swiper-item-content 的 padding-bottom 承担,避免双重 margin
-			//   2. min-height = maxItemHeight(动态 CSS 变量)— 强制所有 item 视觉高度统一,短 item 自然撑高
-			//   3. align-items: flex-start — 覆盖默认 stretch,避免 info-wrap 被拉伸导致短内容被 space-between 拉开
+			// 关键:loopedList 把 list 复制了一份,最后一条 .item(2N-1)也会被 :last-of-type 命中,
+			// 导致其 margin-bottom: 0,而前面所有 item 是 itemGap。
+			// 这会破坏无缝循环:scrollTop 跳回 0 时,用户看到「item 2N-1(无下间距)→ item 0(itemGap)」
+			// 突然多出一截空白,视觉闪一下。
+			// 修复:scroll-view 内所有 item 一视同仁,最后一条也保持 itemGap。
 			.item {
-				margin-bottom: 0 !important;
-				min-height: var(--article-swiper-item-min-height, 200rpx);
-				align-items: flex-start;
-			}
-
-			// style-1 有图时,图片在 min-height item 内垂直居中(避免贴顶导致下方空一大块)
-			.item .article-img {
-				align-self: center;
+				&:last-of-type {
+					margin-bottom: var(--article-item-gap, 16rpx);
+				}
 			}
 		}
 
@@ -558,6 +829,7 @@ export default {
 			border-bottom-left-radius: var(--article-bottom-element-around-radius, 0);
 			border-bottom-right-radius: var(--article-bottom-element-around-radius, 0);
 
+			// 静态列表(非滚动模式)最后一条不补间距
 			&:last-of-type {
 				margin-bottom: 0;
 			}