Skyline Components

This covers the Skyline rendering engine's component system for WeChat mini programs, specifically the enhanced versions of scroll views, swipers, and form controls. You'll want this when building complex scrolling interactions like nested tab lists, pull-to-refresh with custom animations, or draggable bottom sheets. The scroll-view type attribute is mandatory in Skyline, which is a sharp edge if you're porting WebView code. The documentation is thorough on worklet callbacks for zero-latency scroll handlers and shared element transitions between pages. The nested scroll mode with header/body components solves the classic tab-plus-list coordination problem cleanly. If you're doing anything beyond basic static layouts in Skyline, you'll reference the component compatibility table constantly.

skills.sh installs: 1.1K
GitHub stars: 56
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add wechat-miniprogram/skyline-skills --skill skyline-components --agent claude-code

Installs into .claude/skills of the current project.

Files

Skyline 组件开发指南

适用场景

开发滚动列表/瀑布流/网格布局
实现下拉刷新、下拉二级功能
使用嵌套滚动模式
开发轮播图、卡片切换效果
处理表单输入（input/textarea）
实现共享元素/页面转场动画
开发半屏可拖拽面板

组件支持概览

完全支持的高频组件

组件	Skyline 特性增强
scroll-view	type 模式、worklet 回调、嵌套滚动、下拉二级
swiper	layout-type 堆叠/卡片、indicator 动画类型
text	overflow 文本溢出处理、max-lines
image	fade-in 渐显、默认懒加载
input/textarea	worklet 键盘回调、输入法事件
view/button	完全支持

Skyline 新增组件

组件	说明
list-view	列表布局容器
grid-view	网格/瀑布流容器
sticky-section/sticky-header	吸顶布局
nested-scroll-header/body	嵌套滚动
draggable-sheet	半屏可拖拽
share-element	共享元素动画
snapshot	截图组件
span	内联混排