在微信小程序 Skyline 中开发滚动、轮播、表单…

适用于需要基于微信小程序 Skyline 渲染模式开发 scroll-view、swiper、text、image、input/textarea、draggable-sheet、share-element 等组件的场景。

适用场景

解决思路

1. 根据需求查阅 references/ 下的对应文档：长列表/虚拟列表查 scroll/scroll-view.md；下拉刷新/下拉二级查 scroll/scroll-view.md#下拉刷新；嵌套滚动查 scroll/nested-scroll.md；列表/网格布局查 scroll/list-grid-view.md；吸顶效果查 scroll/sticky.md；半屏拖拽面板查 scroll/draggable-sheet.md；轮播图/卡片效果查 layout/swiper.md；文本处理查 media/text.md；图片显示查 media/image.md；输入框开发查 form/input.md；共享元素动画查 special/share-element.md；截图功能查 special/snapshot.md。
2. 使用高频组件时启用 Skyline 增强特性：scroll-view 使用 type 模式、worklet 回调、嵌套滚动、下拉二级；swiper 使用 layout-type 堆叠/卡片、indicator 动画类型；text 使用 overflow 文本溢出处理、max-lines；image 使用 fade-in 渐显、默认懒加载；input/textarea 使用 worklet 键盘回调、输入法事件；view/button 完全支持。
3. 使用 Skyline 新增组件：list-view 列表布局容器；grid-view 网格/瀑布流容器；sticky-section/sticky-header 吸顶布局；nested-scroll-header/body 嵌套滚动；draggable-sheet 半屏可拖拽；share-element 共享元素动画；snapshot 截图；span 内联混排。
4. 在 Skyline 下使用 scroll-view 时必须设置 type 属性，例如设置为 list。
5. 横向滚动时需同时开启 enable-flex 并设置 flex-direction: row，以兼容 WebView。
6. 内联文本只能使用 <text> 组件，不能用 view 嵌套内联文本。
7. list-view/grid-view 必须放在 scroll-view 的 type 为 custom 的模式内使用。
8. 嵌套滚动必须使用 scroll-view 的 type 为 nested 的模式，并配合 nested-scroll-header 和 nested-scroll-body。
9. 禁止在 scroll-view 外直接放置 list-view/grid-view。
10. 禁止在 list-view 中使用非直接子节点列表项。
11. 禁止在 Skyline 使用 web-view/editor/movable-view 组件。
12. 禁止依赖 image 的 WebView-only 裁剪模式 top/bottom/center/left/right。
13. scroll-view 的 type 选择：list 为列表模式，按需渲染直接子节点，用于普通长列表；custom 为自定义模式，支持 list-view/grid-view/sticky，用于复杂布局；nested 为嵌套模式，处理父子 scroll-view 联动，用于 Tab + 列表。
14. 基础列表模式：使用 scroll-view 并设置 type 为 list、scroll-y，设置高度，绑定 bindscrolltolower 加载更多，使用 wx:for 渲染直接子节点。
15. 下拉刷新：在 scroll-view 上设置 refresher-enabled 为 true，refresher-triggered 绑定 refreshing，bindrefresherrefresh 绑定 onRefresh；可提供 slot 为 refresher 的自定义刷新区域；在 onRefresh 中 setData refreshing 为 true，加载数据后置为 false。
16. 嵌套滚动模式：使用 scroll-view 并设置 type 为 nested、scroll-y，内部包含 nested-scroll-header 顶部固定区域和 nested-scroll-body；在 nested-scroll-body 内使用 swiper，每个 swiper-item 内放 scroll-view 并设置 type 为 list、scroll-y、associative-container 为 nested-scroll-view。
17. Worklet 滚动回调：在 scroll-view 上设置 worklet:onscrollupdate 为 onScrollUpdate，在回调函数内写 'worklet'，在 UI 线程读取 e.detail.scrollTop。
18. swiper 布局类型：设置 layout-type 为 stackLeft 实现堆叠效果；设置为 tinder 实现卡片滑动；设置为 transformer 并设置 transformer-type 为 threeD 实现过渡动画。
19. swiper 指示器：设置 indicator-dots，使用 indicator-type 为 normal/worm/expand/jump/slide/scale 等，设置 indicator-color、indicator-active-color、indicator-margin、indicator-spacing。
20. text 文本溢出：单行省略用 overflow 为 ellipsis、max-lines 为 1；多行省略用 overflow 为 ellipsis、max-lines 为 3；渐隐效果用 overflow 为 fade、max-lines 为 1。
21. 内联混排：使用 span 包裹 image 和 text 实现图文混排。
22. input 组件：绑定 bind:selectionchange、bind:keyboardcompositionend；使用 worklet:onkeyboardheightchange 为 onKeyboardHeight，在回调函数内写 'worklet'，从 e.detail 读取 height 和 pageBottomPadding，用于 UI 线程同步调整布局。
23. draggable-sheet：设置 initial-child-size、min-child-size、max-child-size、snap、snap-sizes，绑定 worklet:onsizeupdate；内部 scroll-view 设置 type 为 list 和 associative-container 为 draggable-sheet。
24. draggable-sheet：在 onReady 中通过 createSelectorQuery().select('.sheet').node().exec 获取 sheetContext，调用 scrollTo({size: 0.7, animated: true, duration: 300})。
25. share-element：源页面和目标页面使用相同的 key，例如 hero-image；设置 transform；目标页面可加 transition-on-gesture；通过 rect-tween-type 选择 materialRectArc 或 linear 控制动画轨迹。
26. 列表性能：使用 type 为 list 确保只渲染可见区域。
27. 列表性能：设置 cache-extent 为 500 预渲染视口外区域，优化滚动体验。
28. 列表性能：在 wx:for 的 view 上添加 list-item 属性启用样式共享。
29. swiper 性能：设置 cache-extent 为 1 预渲染相邻页。
30. 组件差异：scroll-view 在 WebView 无 type，Skyline 必须 type。
31. 组件差异：text 在 WebView 用 space 属性，Skyline 用 overflow/max-lines。
32. 组件差异：image 在 WebView 有 9 种裁剪模式，Skyline 有 5 种缩放模式，裁剪模式仅 WebView。
33. 组件差异：swiper 在 WebView 用 snap-to-edge，Skyline 用 layout-type/indicator-type。
34. 组件差异：input 在 WebView 用 placeholder-class，Skyline 用 worklet 回调。
35. 相关技能：滚动 API 参考 skyline-scroll-api。
36. 相关技能：动画开发参考 skyline-worklet。
37. 相关技能：样式开发参考 skyline-wxss。
38. 相关技能：路由转场参考 skyline-route。
39. 相关技能：兼容性诊断参考 skyline-diagnostics。
40. References 目录包括：form/input.md；gesture/gesture-negotiation.md；gesture/gesture-system.md；layout/swiper.md；media/image.md；media/text.md；scroll/draggable-sheet.md；scroll/list-grid-view.md；scroll/nested-scroll.md；scroll/scroll-view.md；scroll/sticky.md；special/share-element.md；special/snapshot.md。

适用边界 · 注意事项

• 未启用 Skyline 渲染模式的微信小程序页面不适用。
• 需要在 Skyline 中使用 web-view/editor/movable-view 的场景不适用。
• 依赖 image 的 WebView-only 裁剪模式 top/bottom/center/left/right 的场景不适用。