上一篇官方发布的 Skyline 转场动画轻松实现 文章中，Skyline 的自定义路由预设了一些常见的路由动画效果，降低开发成本。 [图片] 可惜我的线上小程序「 NONZERO COFFEE 」已经完成了大部分开发任务，再使用预设的路由动画，恐怕又是一番折腾， 但我并不觉得可惜，虽然预设效果方便，但有些效果还是必须自己动手实现，接下来我想介绍一下自定义路由的更花哨的使用，当然，我的使用也只是在官方已经实现的效果与代码上修改的。官方文档链接：Skyline｜原生级卡片转场，小程序轻松实现 在线上小程序中，我想将页面大致分为四种： 1、简单页面 （基本不会与其他页面产生交互的页面）： 自定义路由预设效果都可以随便使用，怎么用怎么好。 2、容器页面（相当于弹窗页面，在webview下可用page-container实现）： 搭配上自定义路由预设效果中的wx://bottom-sheet 半屏弹窗，非常不错。 但是还有两种页面，3、主要页面（用户主要使用的页面）；4、主要转场页面（主要页面的下级或即将跳转的页面如果开发者希望实现）。如果开发者希望实现原生级的卡片转场效果，光用预设效果是不够的，还必须使用到Skyline中的自定义路由、共享元素、worklet多个技术相互配合。 就比如我的小程序中的这个场景（效果可以参考小红书的列表跳转详情），另外，示例gif略有卡顿（主要是我的电脑卡，当然也不排除我的代码还需要优化） [图片] 在我之前的文章中也有从列表跳转商品详情页的操作，但是当时并没有使用这么复杂的动画，但是现在还是加上了，因为在实际业务中，点单的类型很多，有堂食点单，外卖点单，还有店铺自建商城点单，如果都是用同一种简单的跳转动画，用户会觉得非常单调。 所以这里将新的业务加上新的转场效果，不至于让用户视觉疲劳，实打实的增加用户的留存率。 这里首先还是推荐大家看原文 ， 官方文档链接：Skyline｜原生级卡片转场，小程序轻松实现 。 只是提一下我遇到的小问题。 1、共享元素动画不生效或者多个item同时飞跃，那么很有可能是 share-element元素的key值没有对应上或者有重复的key 2、生成这种效果是需要原页面（列表页）和新页面（详情页面）都有<share-element/>元素，那么这两个页面的<share-element/>属性设置也非常重要， 原页面的<share-element/>中需要包裹实际的内容元素（图片、内容文字等），并且不需要设置shuttle-on-push,新页面的<share-element/>中则不需要包裹实际的元素，简单放一个<view/>当作占位元素就行。 原页面：[图片] 新页面：[图片] 3、转场到新页面后，会出现闪动卡顿的情况，可能是共享元素中包裹的图片，在新页面没有，而是加载其他图片，获取发送了网络请求产生了延迟，只要在跳转的时候携带原页面中共享元素的图片url，并在新页面中展示，就基本不会出现卡顿的情况了。 以上都是些小问题，具体的代码实现，还是需要您去参考官方的文章。 最后，这个效果实现起来还是停复杂的，我照着官方代码一个一个字敲，整整敲了一天，中间出现了各种bug，万幸，当效果出现的时候，我觉得一切都是值得的，它确确实实是还原了原生APP的卡片转场效果，这是很振奋人心的事，如果同学们希望开发出媲美APP效果的小程序，skyline框架绝对是最大的利器。

使用wx.openEmbeddedMiniProgram打开半屏小程序时，自定义导航栏 statusBarHeight 为0，没有任何问题，关键是切换为全屏小程序时，自定义导航头的高度缺少 statusBarHeight，高度被压缩变形，导致整个页面样式异常，影响相关功能:例如吸顶等。 自定义导航栏高度是由状态栏高度+胶囊高度+胶囊边距组成的自定义导航栏高度。其中状态栏高度在半屏的情况下为 0，全屏正常。优先打开全屏，则半屏高度异常，优先打开半屏，则全屏高度异常，自定义导航栏高度在不同的屏幕下高度无法同步。

小程序自定义tabbar的tab切换之后图标会闪烁，基础库使用的是2.8.3

在上一篇文章《在小程序中实现原生相册》中，我们学习了自定义路由搭配共享元素实现的原生相册效果，共享元素可以让用户在体验小程序时视觉关联性更强。 除了相册实现之外，常见的卡片转场也非常适合。 [图片] ⬆️ 演示效果：默认动画 vs 卡片转场动画 👇 下面我们来看看卡片转场中通过 共享元素 + 自定义路由 来实现无痕跳转。 [图片] 这里的转场稍微有点复杂，涉及到以下 3 个点 旧卡片：图片放大、内容渐隐新页面：按比例放大、页面渐显手势搭配1、旧卡片：图片放大、内容渐隐 在本示例中，列表页采用的是 scroll-view 瀑布流布局的实现。 [图片] 这里我们的共享元素是卡片，即 grid-view 中的内容 card，卡片包括 图片、内容描述。 [图片] 默认情况下，共享元素是整个节点进行飞跃的，由于前后页面的图片元素一致但文本内容不一致， 导致在第一帧或者最后一帧会有跳动的效果。 为了让转场动画更加自然，我们需要在飞跃的过程中渐隐旧卡片的内容描述。 [图片] 在这里，我们需要先用 this.applyAnimatedStyle 来给对应的节点绑定 worklet 驱动动画。 .card_wrap 节点：整个卡片按比例放大.card_desc 节点：内容描述渐隐[图片] 关于动画执行的时机，我们可以通过配置项修改。 immediate：设置是否立即执行驱动动画flush：shareValue 更新时，applyAnimatedStyle 的 updater 函数刷新时机在本例中，需要保证共享元素的图片与目标页面图片位置重叠，所以 flush 设置 sync 在当前时间片刷新。 [图片] 绑定完驱动动画之后，我们需要给共享元素绑定帧回调事件，根据当前动画进度改变共享变量的值来驱动共享动画 [图片] 2、新页面：按比例放大、页面渐显 新页面在路由中的动画，需要在自定义路由中进行配置。关于自定义路由的更多介绍，可参考《小程序页面转场动画》 在路由动画过程中，我们将上一步的共享元素帧回调拿到 begin、end 的值，然后结合动画进度 t 计算得出新页面的位置、缩放比例。 还有根据动画进度，设置页面渐显，与前面的卡片渐隐承接。 [图片] 3、手势搭配 学习过我们前面的文章的同学都知道，自定义路由经常需要结合页面手势，来实现手势返回，关于手势的基础知识可参考《小程序页面转场动画》 [图片] 这里我们希望手势缩小整个当前页面，所以这里手势返回时只在当前页面做手势动画即可。 在页面详情页的最外层，嵌套一个手势组件 pan-gesture-handler，当手势拖动时根据手势的位置改变整个页面（通过 #fake-host 控制）的位置和大小来达到拖动的效果。 [图片] 同样绑定页面驱动动画，通过 applyAnimatedStyle 给 #fake-host 绑定驱动动画，当共享变量 transX、transY 等变化时则自动改变 transform 来驱动 #fake-host 缩小。 [图片] 接着绑定手势事件，根据手势拖动时拿到位置信息改变共享变量 transX、transY 的值。 [图片] 最后我们需要设置背景颜色透明，来达到类似把卡片拖回列表的视觉效果，更好的减少页面切换感～ [图片] 一个自定义路由的页面会有 3 层可以设置到背景色，要做到透明的效果需要将 3 个背景色都设置为透明。更多自定义路由背景色的详情参考官方文档。 [图片] 想要试试卡片转场的无恒效果～扫描 ⬇️ 下方小程序码即可体验。 如果你也想在小程序中实现卡片转场动画，mark 下这个 源码 直接接到到你的小程序吧～ [图片]

想做一个类似闲鱼鱼塘（百度贴吧）app顶部滑动隐藏的效果。 [图片] 以下是我的方案： 场景： 1.页面内嵌套有一个scroll-view（已设定高度值） 2.整个页面的高度是大于手机屏幕的高度的（也就是说可以触发页面滚动） 3.手指在scroll-view区域内滑动时，总是scroll-view先滚动 需求： 手指在scroll-view区域内滑动时，使页面先滚动，待页面滚动至底部时，再触发scroll-view滚动 已测试： 已经测试过使用scroll-view的滚动开关来控制滚动，但是会造成滑动不连贯的情况。 请问如何解决这个问题，或者说有无更好的解决方案？

在之前的文章中，我们知道了新 scroll-view 可以让小程序的长列表做到丝滑滚动～ 也提到了新 scroll-view 提供了很多新能力 sticky、网格布局、瀑布流布局等，这一篇，我们就来看看这些新能力是怎么使用的～ 新 scroll-view 在原来列表模式（type="list"）的基础上，新增了自定义模式（type="custom"） 在自定义模式下，新增了以下新组件供开发者调用 list-view：列表布局容器sticky-section / sticky-header：吸顶布局容器grid-view：网格布局容器，可实现网格布局、瀑布流布局等sticky布局sticky 布局即在应用中常见的吸顶布局，与 CSS 中的 position: sticky 实现的效果一致，当组件在屏幕范围内时，会按照正常的布局排列，当组件滚出屏幕范围时，始终会固定在屏幕顶部。 常见的使用场景有：通讯录、账单列表、菜单列表等等。 与 position: sticky 不同的是，position: sticky 很难实现列表滚动需要的交错吸顶效果，而 sticky 组件则可以帮忙开发者轻松实现交错吸顶的效果。 sticky 的使用非常简单： 将 scroll-view 切换到 custom 模式采用 sticky-section 作为 scroll-view 的子元素sticky-header 放置吸顶内容list-view 放置列表内容             {{item.name}}               ...       我们来看下采用 sticky 布局做出来的通讯录效果～ [视频] sticky 布局也可以通过给 sticky-section 配置 push-pinned-header 来声明吸顶元素重叠时是否继续上推 像下图输入框和标签列表这种类型，标签列表吸顶时还是希望保留输入框吸顶。 [视频] 网格布局网格布局即将列表切割成格子，每一行的高度固定，常见的视频列表、照片列表等通常都采用网格布局。 在此之前，实现网格布局需要开发者自行实现网格切割，再嵌入到 scroll-view 中。 新 scroll-view 直接提供了 grid-view 组件供开发者使用～ 将 scroll-view 切换到 custom 模式采用 grid-view 类型为 aligned 做为直接子节点grid-view 中直接编写列表                   ...       下面是使用网格布局实现的图片列表效果～ [视频] 瀑布流布局瀑布流布局与网格布局类似，不同的是瀑布流布局中每个格子的高度都可以是不一致的，所以在小程序中实现瀑布流布局就比较复杂了。 开发者需要通过计算格子高度，然后再进行瀑布流拼接，当滚动内容过多时还需要处理节点过多导致内存不足等问题。 grid-view 组件直接支持了瀑布流模式供开发者直接使用，grid-view 组件会根据子元素高度自动布局： 将 scroll-view 切换到 custom 模式采用 grid-view 类型为 masonry 做为直接子节点grid-view 中直接编写列表                   ...       下面是使用瀑布流布局实现的图片列表效果～ [视频] 想要立即体验？现在通过微信开发者工具导入 代码片段，即可体验新版 scroll-view 组件能力～