Skip to content

sn-waterflow

旧版组件:sn-waterfall.md(v2 更名 waterfall → waterflow 并整体重构) 旧版状态:v1.1.6 的 sn-waterfall 为插槽拼装式瀑布流(子组件 sn-waterfall-item,支持列数与间距配置),官方文档明确标注"不完善、不支持虚拟列表、不建议正式使用、正在重构中";v2 更名为 sn-waterflow 并基于官方 waterflow 组件与 Web 端自研虚拟滚动完全重写。 差异明细

  • 更名:组件名 sn-waterfallsn-waterflow;子组件 sn-waterfall-item 移除(由数据插槽替代)
  • 架构重构:
    • 插槽内手写 sn-waterfall-itemindex/height/imgSrc 等属性拼装卡片)→ list 属性传数据数组 + 默认作用域插槽(item/index)渲染任意卡片内容
    • App 端改用官方 waterflow 组件,条目按数据项 type 字段分组复用回收(内部保留 type 值:刷新条目 2、加载更多条目 6
    • Web 端为自研虚拟滚动瀑布流:动态测量条目高度、仅渲染可视区域及 overscan 范围条目,支持触底加载与触摸下拉刷新
  • 移除属性:
    • sn-waterfallcolspacingcustomStyle 旧属性随重构取消(col/spacing 语义由新属性承接,见下)
    • sn-waterfall-itemindexheightimgSrcbgColorpaddingborderRadiusimgBorderRadiuscustomStylecustomImageStyle 整体移除(卡片样式经作用域插槽自行编写)
  • 更名:colcrossAxisCountspacing(子项单一间距)→ crossAxisGap(列间距)+ mainAxisGap(行间距),且支持 $ 简写
  • 新增属性:
    • list(列表数据数组,核心属性)
    • colWidth(Web 端按列宽自适应列数)、breakpoints(Web 端响应式断点)、estimatedItemHeight / overscan(Web 端虚拟滚动参数)
    • maxCrossAxisExtent(iOS / HarmonyOS 端单列最大宽度自动增列)
    • 内置能力开关与配置:refresherEnabledrefresherConfigrefresherThresholdrefresherMaxDragDistancerefresherBackgroundrefresherDefaultStyleloadmoreshowLoadmoreloadmoreConfigbacktopbacktopTargetbacktopTopbacktopRightbacktopBottom
    • 滚动控制:bouncesassociativeContainerupperThresholdlowerThresholdscrollTopscrollLeftscrollIntoViewscrollWithAnimationshowScrollbarandroidOverscrollandroidScrollbarDraggableandroidRefresherColorenableBackToTopenablePassive
    • customClass(根节点外部样式类)
  • 新增双向绑定:v-model:refresher-triggered(刷新状态)、v-model:loadmore-status(加载状态,触底/点击时组件内部自动改写)
  • 新增事件:refreshscrolltoupperscrolltolowerscrollscrollendrefresherpullingrefresherrefreshrefresherrestorerefresherabortloadmore(旧版无任何事件)
  • 新增方法:scrollTorefreshstopRefreshloadMoreregisterBacktop
  • 插槽变化:默认插槽 → 默认作用域插槽(参数 itemindex);移除 sn-waterfall-itemdefault 插槽
  • 行为变化:旧版"不建议正式使用"的实验实现 → 生产可用的复用回收 + 虚拟滚动双端实现;触底自动触发加载更多并经 loadmore-status 管理加载状态

使用 MIT 协议