uview-plus 3.8.126 → 3.8.128

package/README.md

@@ -84,6 +84,19 @@ uview-plus现已推出免费可视化设计，可以方便的进行页面可视
 </template>
 ```
 
+## AI 编码助手
+
+包内 `skills/` 目录提供了给 AI 编码助手用的 uview-plus 使用说明（Agent Skills 的 `SKILL.md` 格式），包含组件与图标清单、easycom 接入、`uni.$u` 工具库和多端常见坑，让 AI 少猜少写错。
+
+Claude Code 等工具把它拷到项目的 `.claude/skills/` 下即可生效：
+
+```bash
+mkdir -p .claude/skills
+cp -r node_modules/uview-plus/skills/uview-plus .claude/skills/
+```
+
+其他工具的接法与 uni_modules 装法见 `skills/README.md`。
+
 ## 版权信息
 uview-plus遵循[MIT](https://en.wikipedia.org/wiki/MIT_License)开源协议，意味着您无需支付任何费用，也无需授权，即可将uview-plus应用到您的产品中。
 

package/changelog.md

@@ -1,3 +1,42 @@
+## 3.8.128
+feat: 新增 u-video 视频播放器组件，并集中修复列表滚动、日历副标题、下拉菜单等 20+ 个问题
+
+本次为大版本迭代：新增 u-video 视频播放器组件（含弹幕、进度条、自定义控制层），随包提供面向 AI 编码助手的 uview-plus skill，并集中修复了列表锚点滚动、日历副标题同步、select 面板、App 端字体加载等一批跨组件问题。
+
+- 新增 u-video：统一封装 video 播放能力，支持弹幕（danmaku）、自定义进度条与控制层、常见播放属性透传，覆盖 H5 / 小程序 / App
+- 随包提供 skills/uview-plus：面向 AI 编码助手的技能包，含 setup、components、api、icons、pitfalls 参考文档
+- u-list / u-list-item：新增 anchor 锚点滚动定位，修复 scrollIntoViewById 调用后不滚动的问题（#671、#721），并合并 anchor 定位实现
+- u-calendar：修复关闭再打开后副标题与月份内容不一致；优化大 monthNum 下的渲染性能
+- u-select：完善面板指示器、自适应宽度与多选回显逻辑
+- u-icon：字体加载失败后改由定时器重试，修复 u-search 输入后无法再次聚焦的问题（#844）
+- u-dropdown：修复 nvue 下菜单宽度被压缩的问题（#814）
+- u-collapse / u-collapse-item：修复展开后内容变高被裁切；value 为 null 时不再重置展开状态
+- u-cell：必填星号改用真实节点渲染，修复小程序与 nvue 下不显示
+- u-slider：修复 border-box 下的滑块错位；点击轨道时直接触发 change
+- u-textarea：回车默认换行并支持 confirmHold
+- u-text：透传 data-* 属性，修复分享回调拿不到数据的问题
+- u-upload：透传 H5 端视频真实的 File 对象
+- u-search：修复小程序端占位符颜色首屏不生效
+- u-cate-tab：优化大量图片场景的首屏渲染与滚动联动
+- u-tabs：去除 scroll-view 上无效的 flex 布局
+- u-picker：修复滚动过上级列后的 columnIndex 错位
+- u-datetime-picker：修复空值回填并让确认返回当前选中值
+- u-grid：兼容旧版 WebView 的网格布局
+- u-parse：支持 quill 的对齐 class
+- u-number-keyboard：修复 PC 浏览器退格键不触发；u-car-keyboard 支持警车车牌输入
+- 类型声明：补齐步进器、分页器与表单相关类型；补齐 u-video 与 icon 字体相关配置
+- 合入任务分支 task/71、task/82
+
+## 3.8.127
+fix: 修复抖音小程序 tabbar-item / steps-item 因父子生命周期顺序导致的崩溃
+
+抖音小程序中，子组件的 created 可能早于父组件的 created 执行，此时父组件实例已可通过 $parent 找到，但父组件的 children 数组尚未初始化（u-tabbar / u-steps / u-list 都在自己的 created 里才赋值 children=[]）。子组件 init() 直接访问 this.parent.children.indexOf(this) 时 children 仍为 undefined，抛出 TypeError: Cannot read properties of undefined (reading 'indexOf')，并伴随「up-tabbar-item必须搭配up-tabbar组件使用」的误报警告（该分支只 log 未 return，继续执行才崩溃）。对照 u-radio / u-checkbox：它们在 mounted() 调 init() 且不访问 parent.children，所以不受影响。
+
+- u-tabbar-item：init() 在 error() 后补 return，并加 !this.parent.children 守卫；mounted() 新增 init() 补偿重试（created 阶段被跳过时补齐激活态）；clickHandler() 补 this.parent / children 守卫
+- u-steps-item：init() 加 !this.parent.children 守卫；mounted() 新增 init() 补偿重试，确保自身已注册进父组件 children
+- u-list-item：init() 加 !this.parent / !this.parent.children 守卫，避免 $parent 返回 false 时报错
+- 共享 mixin getParentData()：访问 children 前先判断 this.parent 存在，避免 $parent 返回 false 时读取 false.children 崩溃，影响所有父子联动组件
+
 ## 3.8.126
 feat: 新增 u-flex 通用弹性布局容器组件
 

package/components/u-calendar/month.vue

@@ -39,6 +39,8 @@
 	import defProps from '../../libs/config/props';
 	import dayjs from '../u-datetime-picker/dayjs.esm.min.js';
 	import { t } from '../../libs/i18n'
+	// 已经是YYYY-MM-DD形式的日期字符串，无需再交给dayjs解析
+	const DATE_STR_REG = /^\d{4}-\d{2}-\d{2}$/
 	export default {
 		name: 'u-calendar-month',
 		mixins: [mpMixin, mixin],
@@ -169,6 +171,29 @@
 			selectedChange() {
 				return [this.minDate, this.maxDate, this.defaultDate]
 			},
+			// selected中的元素可能是用户通过defaultDate传入的原始值（未补零的字符串、
+			// Date对象、时间戳等），这里统一归一化一次，避免在每个日期格子里反复解析
+			selectedDates() {
+				return this.selected.map((item) => this.formatDate(item))
+			},
+			// 供渲染期做O(1)的选中判断，取代原先每个格子都要遍历selected的dayjs比较
+			selectedDateMap() {
+				const map = {}
+				this.selectedDates.forEach((date) => {
+					map[date] = true
+				})
+				return map
+			},
+			// 区间模式的起止日期
+			selectedStart() {
+				return this.selectedDates[0]
+			},
+			selectedEnd() {
+				return this.selectedDates[this.selectedDates.length - 1]
+			},
+			normalizedTodayDate() {
+				return this.todayDate ? this.formatDate(this.todayDate) : ''
+			},
 			dayStyle(index1, index2, item) {
 				return (index1, index2, item) => {
 					const style = {}
@@ -204,18 +229,18 @@
 			},
 			daySelectStyle() {
 				return (index1, index2, item) => {
-					let date = dayjs(item.date).format("YYYY-MM-DD"),
+					let date = this.dateOf(item),
 						style = {}
-					// 判断date是否在selected数组中，因为月份可能会需要补0，所以使用dateSame判断，而不用数组的includes判断
-					if (this.selected.some(item => this.dateSame(item, date))) {
+					// selected已归一化为YYYY-MM-DD（月份可能需要补0），故可直接比较字符串
+					if (this.selectedDateMap[date]) {
 						style.backgroundColor = this.color
 					}
-					if (this.todayDate && this.dateSame(date, this.todayDate)) {
+					if (this.normalizedTodayDate && date === this.normalizedTodayDate) {
 						style.border = `1px solid ${this.resolvedTodayColor}`
 						style.boxSizing = 'border-box'
 					}
 					if (this.mode === 'single') {
-						if (date === this.selected[0]) {
+						if (date === this.selectedStart) {
 							// 因为需要对nvue的兼容，只能这么写，无法缩写，也无法通过类名控制等等
 							style.borderTopLeftRadius = '3px'
 							style.borderBottomLeftRadius = '3px'
@@ -223,34 +248,31 @@
 							style.borderBottomRightRadius = '3px'
 						}
 					} else if (this.mode === 'range') {
-						if (this.selected.length >= 2) {
-							const len = this.selected.length - 1
+						if (this.selectedDates.length >= 2) {
 							// 第一个日期设置左上角和左下角的圆角
-							if (this.dateSame(date, this.selected[0])) {
+							if (date === this.selectedStart) {
 								style.borderTopLeftRadius = '3px'
 								style.borderBottomLeftRadius = '3px'
 							}
 							// 最后一个日期设置右上角和右下角的圆角
-							if (this.dateSame(date, this.selected[len])) {
+							if (date === this.selectedEnd) {
 								style.borderTopRightRadius = '3px'
 								style.borderBottomRightRadius = '3px'
 							}
 							// 处于第一和最后一个之间的日期，背景色设置为浅色，通过将对应颜色进行等分，再取其尾部的颜色值
-							if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
-									.selected[len]))) {
-								const rangeEndColor = this.upThemeVar('--up-card-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
-								style.backgroundColor = colorGradient(this.color, rangeEndColor, 100)[90]
+							if (date > this.selectedStart && date < this.selectedEnd) {
+								style.backgroundColor = this.rangeMiddleColor
 								// 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符
 								style.opacity = this.upThemeIsDark ? 0.85 : 0.7
 							}
-						} else if (this.selected.length === 1) {
+						} else if (this.selectedDates.length === 1) {
 							// 之所以需要这么写，是因为uni-app的iOS客户端的bug
 							// 进行还原操作，否则在nvue的iOS，uni-app有bug，会导致诡异的表现
 							style.borderTopLeftRadius = '3px'
 							style.borderBottomLeftRadius = '3px'
 						}
 					} else {
-						if (this.selected.some(item => this.dateSame(item, date))) {
+						if (this.selectedDateMap[date]) {
 							style.borderTopLeftRadius = '3px'
 							style.borderBottomLeftRadius = '3px'
 							style.borderTopRightRadius = '3px'
@@ -260,27 +282,31 @@
 					return style
 				}
 			},
+			// 区间中间日期的背景色与格子无关，按整体算一次即可，
+			// 否则区间内每个格子都要做一遍100等分的颜色渐变计算
+			rangeMiddleColor() {
+				const rangeEndColor = this.upThemeVar('--up-card-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
+				return colorGradient(this.color, rangeEndColor, 100)[90]
+			},
 			resolvedTodayColor() {
 				return this.todayColor || this.color
 			},
 			// 某个日期是否被选中
 			textStyle() {
 				return (item) => {
-					const date = dayjs(item.date).format("YYYY-MM-DD"),
+					const date = this.dateOf(item),
 						style = {}
 					// 选中的日期，提示文字设置白色
-					if (this.selected.some(item => this.dateSame(item, date))) {
+					if (this.selectedDateMap[date]) {
 						style.color = '#ffffff'
 					}
 					if (this.mode === 'range') {
-						const len = this.selected.length - 1
 						// 如果是范围选择模式，第一个和最后一个之间的日期，文字颜色设置为高亮的主题色
-						if (dayjs(date).isAfter(dayjs(this.selected[0])) && dayjs(date).isBefore(dayjs(this
-								.selected[len]))) {
+						if (date > this.selectedStart && date < this.selectedEnd) {
 							style.color = this.color
 						}
 					}
-					if (this.todayDate && this.dateSame(date, this.todayDate) && !this.isSelectedDate(date)) {
+					if (this.normalizedTodayDate && date === this.normalizedTodayDate && !this.selectedDateMap[date]) {
 						style.color = this.resolvedTodayColor
 					}
 					return style
@@ -289,24 +315,23 @@
 			// 获取底部的提示文字
 			getBottomInfo() {
 				return (index1, index2, item) => {
-					const date = dayjs(item.date).format("YYYY-MM-DD")
+					const date = this.dateOf(item)
 					const bottomInfo = item.bottomInfo
 					// 当为日期范围模式时，且选择的日期个数大于0时
-					if (this.mode === 'range' && this.selected.length > 0) {
-						if (this.selected.length === 1) {
+					if (this.mode === 'range' && this.selectedDates.length > 0) {
+						if (this.selectedDates.length === 1) {
 							// 选择了一个日期时，如果当前日期为数组中的第一个日期，则显示底部文字为“开始”
-							if (this.dateSame(date, this.selected[0])) return this.startText
+							if (date === this.selectedStart) return this.startText
 							else return bottomInfo
 						} else {
-							const len = this.selected.length - 1
 							// 如果数组中的日期大于2个时，第一个和最后一个显示为开始和结束日期
-							if (this.dateSame(date, this.selected[0]) && this.dateSame(date, this.selected[1]) &&
-								len === 1) {
+							if (this.selectedDates.length === 2 && date === this.selectedStart && date === this
+								.selectedEnd) {
 								// 如果长度为2，且第一个等于第二个日期，则提示语放在同一个item中
 								return `${this.startText}/${this.endText}`
-							} else if (this.dateSame(date, this.selected[0])) {
+							} else if (date === this.selectedStart) {
 								return this.startText
-							} else if (this.dateSame(date, this.selected[len])) {
+							} else if (date === this.selectedEnd) {
 								return this.endText
 							} else {
 								return bottomInfo
@@ -343,18 +368,29 @@
 				}
 			},
 			isForbid(item) {
-				let date = dayjs(item.date).format("YYYY-MM-DD")
-				if (this.mode !== 'range' && this.forbidDays.includes(date)) {
-					return true
+				if (this.mode === 'range' || !this.forbidDays.length) {
+					return false
 				}
-				return false
+				return this.forbidDays.includes(this.dateOf(item))
+			},
+			// 归一化为YYYY-MM-DD，已经是该形式的字符串则直接返回，省掉一次dayjs解析
+			formatDate(value) {
+				if (typeof value === 'string' && DATE_STR_REG.test(value)) {
+					return value
+				}
+				return dayjs(value).format("YYYY-MM-DD")
+			},
+			// 取日期格子的日期字符串，父组件生成数据时已经算好；
+			// 兼容自定义formatter返回了不带dateStr的新对象的情况
+			dateOf(item) {
+				return item.dateStr || dayjs(item.date).format("YYYY-MM-DD")
 			},
 			// 判断两个日期是否相等
 			dateSame(date1, date2) {
 				return dayjs(date1).isSame(dayjs(date2))
 			},
 			isSelectedDate(date) {
-				return this.selected.some(item => this.dateSame(item, date))
+				return !!this.selectedDateMap[this.formatDate(date)]
 			},
 			// 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
 			getWrapperWidth() {

package/components/u-calendar/u-calendar.vue

@@ -300,6 +300,12 @@ export default {
 			handler(n) {
 				if (n) {
 					this.setMonth()
+					// 弹层每次打开都会重新挂载并滚动回默认月份，副标题指向的月份索引要一起复位，
+					// 否则会沿用上一次关闭前滚动到的月份，导致副标题与日历内容对应不上。
+					// 页面内模式的内容一直挂载着，滚动位置不会重置，所以不做处理
+					if (!this.pageInline) {
+						this.monthIndex = this.getDefaultMonthIndex()
+					}
 				} else {
 					// 关闭时重置scrollIntoView，否则会出现二次打开日历，当前月份数据显示不正确。
 					// scrollIntoView需要有一个值变动过程，才会产生作用。
@@ -619,33 +625,42 @@ export default {
 				this.monthNum,
 				this.getMonths(minDate, maxDate)
 			)
+			// 记录上一次测量到的各月份top值，月份未发生变化时高度也不会变，
+			// 复用后可避免重新生成数据后onScroll没有判断依据
+			const topCache = {}
+			this.months.forEach(item => {
+				if (typeof item.top === 'number') {
+					topCache[`${item.year}-${item.month}`] = item.top
+				}
+			})
 			// 先清空数组
 			this.months = []
+			// 最大最小日期只需格式化一次，YYYY-MM-DD的字典序即时间序，可直接比较字符串
+			const minDateStr = dayjs(minDate).format('YYYY-MM-DD')
+			const maxDateStr = dayjs(maxDate).format('YYYY-MM-DD')
+			const formatter = this.formatter || this.innerFormatter
 			for (let i = 0; i < months; i++) {
+				// 每个月只构造一个dayjs对象，当月的日期数据都由它派生，
+				// 避免按天重复解析（monthNum较大时这里是主要开销）
+				const monthStart = dayjs(minDate).add(i, 'month')
+				const monthValue = monthStart.month() + 1
 				this.months.push({
-					date: new Array(
-						dayjs(minDate).add(i, 'month').daysInMonth()
-					)
+					date: new Array(monthStart.daysInMonth())
 						.fill(1)
 						.map((item, index) => {
 							// 日期，取值1-31
 							let day = index + 1
+							const current = monthStart.date(day)
 							// 星期，0-6，0为周日
-							const week = dayjs(minDate)
-								.add(i, 'month')
-								.date(day)
-								.day()
-							const date = dayjs(minDate)
-								.add(i, 'month')
-								.date(day)
-								.format('YYYY-MM-DD')
+							const week = current.day()
+							const date = current.format('YYYY-MM-DD')
 							let bottomInfo = ''
 							if (this.showLunar) {
 								// 将日期转为农历格式
 								const lunar = Calendar.solar2lunar(
-									dayjs(date).year(),
-									dayjs(date).month() + 1,
-									dayjs(date).date()
+									current.year(),
+									monthValue,
+									day
 								)
 								bottomInfo = lunar.IDayCn
 							}
@@ -654,29 +669,30 @@ export default {
 								week,
 								// 小于最小允许的日期，或者大于最大的日期，则设置为disabled状态
 								disabled:
-									dayjs(date).isBefore(
-										dayjs(minDate).format('YYYY-MM-DD')
-									) ||
-									dayjs(date).isAfter(
-										dayjs(maxDate).format('YYYY-MM-DD')
-									),
+									date < minDateStr || date > maxDateStr,
 								// 返回一个日期对象，供外部的formatter获取当前日期的年月日等信息，进行加工处理
 								date: new Date(date),
+								// 已格式化好的日期字符串，供month组件比较使用，
+								// 省掉渲染期对每个日期格子的重复解析
+								dateStr: date,
 								bottomInfo,
 								dot: false,
-								month:
-									dayjs(minDate).add(i, 'month').month() + 1
+								month: monthValue
 							}
-							const formatter =
-								this.formatter || this.innerFormatter
 							return formatter(config)
 						}),
 					// 当前所属的月份
-					month: dayjs(minDate).add(i, 'month').month() + 1,
+					month: monthValue,
 					// 当前年份
-					year: dayjs(minDate).add(i, 'month').year()
+					year: monthStart.year()
 				})
 			}
+			this.months.forEach(item => {
+				const cachedTop = topCache[`${item.year}-${item.month}`]
+				if (typeof cachedTop === 'number') {
+					item.top = cachedTop
+				}
+			})
 			if (this.monthSwitch) {
 				this.monthIndex = this.getDefaultMonthIndex()
 			}
@@ -750,6 +766,9 @@ export default {
 				return `${year}-${month}` === selected
 			})
 			if (_index !== -1) {
+				// 滚动位置是程序主动设置的，同步更新副标题指向的月份索引。
+				// 只依赖scroll事件的话，滚动位置没有真正变化时收不到事件，副标题就会停留在上一次的月份
+				this.monthIndex = _index
 				// #ifndef MP-WEIXIN
 				this.$nextTick(() => {
 					this.scrollIntoView = ''
@@ -758,7 +777,15 @@ export default {
 				})
 				// #endif
 				// #ifdef MP-WEIXIN
-				this.scrollTop = this.months[_index].top || 0;
+				// scrollTop与scrollIntoView同理，需要有一个值变动过程才会生效，
+				// 否则二次打开日历时沿用上次的数值，scroll-view不会滚动到默认月份
+				const _top = this.months[_index].top || 0;
+				this.scrollTop = 0;
+				if (_top !== 0) {
+					this.$nextTick(() => {
+						this.scrollTop = _top;
+					})
+				}
 				// #endif
 			}
 		},
@@ -766,13 +793,22 @@ export default {
 		onScroll(event) {
 			// 不允许小于0的滚动值，如果scroll-view到顶了，继续下拉，会出现负数值
 			const scrollTop = Math.max(0, event.detail.scrollTop)
-			// 将当前滚动条数值，除以滚动区域的高度，可以得出当前滚动到了哪一个月份的索引
+			// 月份的top值尚未测量出来时不做判断，否则所有月份的判断阈值相同，
+			// 会把副标题固定到最后一个月份上
+			if (!this.months.some(item => typeof item.top === 'number')) return
+			// 将当前滚动条数值，与各月份的top值比较，可以得出当前滚动到了哪一个月份的索引
+			let monthIndex = 0
 			for (let i = 0; i < this.months.length; i++) {
-				if (scrollTop >= (this.months[i].top || this.listHeight)) {
-					this.monthIndex = i
-					this.scrollIntoViewScroll = `month-${i}`
+				const top = this.months[i].top
+				if (typeof top !== 'number') continue
+				if (scrollTop >= top) {
+					monthIndex = i
+				} else {
+					break
 				}
 			}
+			this.monthIndex = monthIndex
+			this.scrollIntoViewScroll = `month-${monthIndex}`
 		},
 		// 更新月份的top值
 		onUpdateMonthTop(topArr = []) {

package/components/u-car-keyboard/u-car-keyboard.vue

@@ -47,7 +47,8 @@
 			</view>
 			<view
 				v-if="i === 3"
-				@touchstart="backspaceClick"
+				@tap="backspaceClick"
+				@touchstart="backspaceTouchStart"
 				@touchend="clearTimer"
 				class="u-keyboard__button__inner-wrapper"
 			>
@@ -128,7 +129,8 @@
 					'澳',
 					'新',
 					'使',
-					'学'
+					'学',
+					'警'
 				];
 				let tmp = [];
 				// 打乱顺序
@@ -137,7 +139,7 @@
 				tmp[0] = data.slice(0, 10);
 				tmp[1] = data.slice(10, 20);
 				tmp[2] = data.slice(20, 30);
-				tmp[3] = data.slice(30, 36);
+				tmp[3] = data.slice(30, 37);
 				return tmp;
 			},
 			engKeyBoardList() {
@@ -204,17 +206,28 @@
 			changeCarInputMode() {
 				this.abc = !this.abc;
 			},
-			// 点击退格键
+			// 点击退格键，PC端浏览器(如电脑版微信内置浏览器)只有鼠标事件不触发touch，故由tap触发删除
 			backspaceClick() {
 				this.$emit('backspace');
-				clearInterval(this.timer); //再次清空定时器，防止重复注册定时器
-				this.timer = null;
-				this.timer = setInterval(() => {
+			},
+			// 触摸退格键，一定时间后进入长按连续删除状态，短按时会在touchend前被清除
+			backspaceTouchStart() {
+				this.clearTimer(); //再次清空定时器，防止重复注册定时器
+				this.timer = setTimeout(() => {
+					this.$emit('backspace');
+					this.backspaceLongPress();
+				}, 600);
+			},
+			// 长按状态下每隔一段时间删除一次
+			backspaceLongPress() {
+				this.clearTimer();
+				this.timer = setTimeout(() => {
 					this.$emit('backspace');
+					this.backspaceLongPress();
 				}, 250);
 			},
 			clearTimer() {
-				clearInterval(this.timer);
+				clearTimeout(this.timer);
 				this.timer = null;
 			},
 		}

package/components/u-cate-tab/u-cate-tab.vue

@@ -20,7 +20,7 @@
 				</view>
 				<view class="u-cate-tab__page-view">
 					<template :key="index" v-for="(item , index) in tabList">
-						<view v-if="mode == 'follow' || ( mode == 'tab' && index == innerCurrent)"
+						<view v-if="(mode == 'follow' && index < renderLimit) || ( mode == 'tab' && index == innerCurrent)"
 							class="u-cate-tab__page-item" :id="'item' + index">
 							<slot name="itemList" :item="item">
 							</slot>
@@ -76,6 +76,16 @@
 			current: {
                 type: Number,
                 default: 0
+            },
+			// 右侧内容是否随滚动渐进渲染，分类很多时可避免首屏一次性渲染全部图片
+			lazyRender: {
+                type: Boolean,
+                default: true
+            },
+			// 渐进渲染时首屏渲染的分类数量，之后每次追加也是该数量
+			lazyRenderCount: {
+                type: Number,
+                default: 8
             }
         },
         watch: {
@@ -83,6 +93,10 @@
 				deep: true,
 				handler(newVal, oldVal) {
 					// this.observer();
+					// 整体换了一份数据时重新从首屏开始渐进渲染；仅内容变化则保留已渲染范围
+					if (newVal !== oldVal) {
+						this.renderCount = 0;
+					}
 					sleep(30).then(() => {
 						this.getMenuItemTop();
 						this.leftMenuStatus(this.innerCurrent);
@@ -103,6 +117,16 @@
 			}
         },
 		emits: ['update:current'],
+		computed: {
+			// 渐进渲染时右侧最多渲染到第几个分类（不含该下标）
+			renderLimit() {
+				if (!this.lazyRender || this.mode != 'follow') {
+					return this.tabList.length;
+				}
+				// 当前选中项必须在渲染范围内，否则联动滚动找不到目标节点
+				return Math.min(this.tabList.length, Math.max(this.renderCount, this.lazyRenderCount, this.innerCurrent + 1));
+			}
+		},
 		data() {
 			return {
 				scrollTop: 0, //tab标题的滚动条位置
@@ -117,6 +141,7 @@
 				arr: [],
 				scrollRightTop: 0, // 右边栏目scroll-view的滚动条高度
 				timer: null, // 定时器
+				renderCount: 0, // 渐进渲染已放开的分类数量
 			}
 		},
 		mounted() {
@@ -134,6 +159,8 @@
 			// 点击左边的栏目切换
 			async swichMenu(index) {
 				if (this.mode == 'follow') {
+					// 渐进渲染下目标分类可能还没渲染，先补齐再滚动，否则scroll-into-view找不到节点
+					await this.growRender(index + 1);
 					if(this.arr.length == 0) {
 						await this.getMenuItemTop();
 					}
@@ -148,6 +175,19 @@
 					this.$emit('update:current', index);
 				})
 			},
+			// 渐进渲染：把右侧渲染范围放开到count个分类，并重新测量各分类位置
+			async growRender(count) {
+				if (!this.lazyRender || this.mode != 'follow') return false;
+				// 已经全部渲染完就不用再测量，否则滚到底部时每次节流都会白跑一次查询
+				if (this.renderLimit >= this.tabList.length) return false;
+				if (count <= this.renderLimit) return false;
+				this.renderCount = Math.min(this.tabList.length, count);
+				await this.$nextTick();
+				// 小程序端节点布局晚于nextTick，等一拍再测量，否则arr拿到的还是旧位置
+				await sleep(30);
+				await this.getMenuItemTop();
+				return true;
+			},
 			// 获取一个目标元素的高度
 			getElRect(elClass, dataVal) {
 				return new Promise((resolve, reject) => {
@@ -196,8 +236,11 @@
 			},
 			// 设置左边菜单的滚动状态
 			async leftMenuStatus(index) {
-				this.innerCurrent = index;
-				this.$emit('update:current', index);
+				// 仅在选中项真正变化时才同步父组件，否则滚动过程中每次都会重复通知
+				if (this.innerCurrent != index) {
+					this.innerCurrent = index;
+					this.$emit('update:current', index);
+				}
 				// 如果为0，意味着尚未初始化
 				if (this.menuHeight == 0 || this.menuItemHeight == 0) {
 					await this.getElRect('u-cate-tab__menu-scroll-view', 'menuHeight');
@@ -239,17 +282,15 @@
 				this.oldScrollTop = e.detail.scrollTop;
                 // console.log(e.detail.scrollTop)
                 // console.log(JSON.stringify(this.arr))
-				if(this.arr.length == 0) {
-					await this.getMenuItemTop();
-				}
 				if(this.timer) return ;
-				if(!this.menuHeight) {
-					await this.getElRect('u-cate-tab__menu-scroll-view', 'menuHeight');
-				}
-				setTimeout(() => { // 节流
+				// 节流：定时器必须挂到this上，否则上面的拦截永远不生效，每个滚动事件都会跑一遍联动
+				this.timer = setTimeout(async () => {
 					this.timer = null;
+					if(this.arr.length == 0) {
+						await this.getMenuItemTop();
+					}
 					// scrollHeight为右边菜单垂直中点位置
-					let scrollHeight = e.detail.scrollTop + 1;
+					let scrollHeight = this.oldScrollTop + 1;
                     // console.log(e.detail.scrollTop)
 					for (let i = 0; i < this.arr.length; i++) {
 						let height1 = this.arr[i];
@@ -263,6 +304,10 @@
                             // console.log('height1', height1)
                             // console.log('height2', height2)
 							this.leftMenuStatus(i);
+							// 快滚到已渲染的最后一个分类时追加下一批
+							if (i >= this.renderLimit - 2) {
+								this.growRender(this.renderLimit + this.lazyRenderCount);
+							}
 							return ;
 						}
 					}