skyline-route
Skyline 自定义路由与页面转场
适用场景
- 实现自定义页面转场动画(半屏、缩放、渐显等)
- 使用预设路由快速实现常见转场效果
- 配置页面返回手势(横向/纵向/多方向)
- 实现卡片展开到详情页的容器转场动画
- 通过 Router API 管理自定义路由
核心概念
路由能力层级
| 层级 | 能力 | 适用场景 |
|---|---|---|
| 预设路由 | 一行代码使用 7 种内置效果 | 快速实现常见转场 |
| 自定义路由 | 通过 routeBuilder 完全控制动画 | 高度定制化转场 |
| 容器转场 | <open-container> 元素级过渡 |
卡片展开到详情页 |
More from wechat-miniprogram/skyline-skills
skyline-worklet
Skyline Worklet 动画系统技能。使用 worklet 函数、共享变量(SharedValue)、动画类型(timing/spring/decay)、Easing 缓动函数、组合动画和线程通信(runOnUI/runOnJS)开发高性能交互动画时使用此技能。适用于拖拽、手势跟随、弹簧回弹等需要 UI 线程直接响应的动画场景。触发关键词:worklet、worklet 动画、SharedValue、共享变量、timing、spring、decay、Easing、runOnUI、runOnJS、applyAnimatedStyle、交互动画、手势动画、UI 线程动画。
255skyline-components
Skyline 组件开发技能。涵盖 scroll-view 及其增强模式(列表/嵌套滚动)、swiper 高级特性、表单组件、图片/文本组件、半屏可拖拽组件、共享元素动画等。适用于需要开发滚动列表、轮播、表单输入、页面过渡动画等场景。
236skyline-config
Skyline 小程序 JSON 配置规范技能。涵盖 app.json 全局配置(renderer、rendererOptions、componentFramework)、页面 json 配置(navigationStyle、disableScroll)、project.config.json 项目配置。适用于创建新 Skyline 项目、迁移 WebView 项目、配置混合渲染。触发关键词:app.json、页面配置、renderer、rendererOptions、skyline配置、navigationStyle、disableScroll、componentFramework、glass-easel、project.config.json。
221skyline-overview
Skyline 渲染引擎概览与迁移技能。了解 Skyline 架构、性能优势、功能特性、迁移指南和最佳实践时使用此技能。适用于初次接触 Skyline、评估迁移成本、或需要了解整体框架的场景。
218skyline-scroll-api
Skyline 滚动控制 API 技能。涵盖 ScrollViewContext(程序化下拉刷新、下拉二级、滚动定位)、DraggableSheetContext(半屏面板程序化滚动)、worklet.scrollViewContext(UI 线程直接控制滚动)。适用于程序化触发刷新/二级、控制 DraggableSheet 位置、在 worklet 中操作滚动。触发关键词:ScrollViewContext、DraggableSheetContext、scrollTo、triggerRefresh、triggerTwoLevel、下拉刷新API、下拉二级API、滚动API、worklet scrollViewContext。
216skyline-wxss
Skyline WXSS 样式支持技能。提供 Skyline 支持的 CSS 属性、值和限制信息。触发关键词:WXSS、CSS 支持、样式兼容性、属性支持、不支持的属性、display grid、position sticky、overflow、filter、渐变、gradient、linear-gradient、radial-gradient、conic-gradient、border-style、white-space、font-weight、text-decoration、text-overflow、aspect-ratio、will-change、calc、env、mask、mask-image、background-image、transition、animation、transform、font-feature-settings。
214