微信小程序如何提高样式过渡流畅性

Question

需求场景：

• 在页面滚动超过某个位置开始，header导航固定定位，某些元素宽高／字体大小／颜色／粗细等有所变化；
• 当页面中某些item内容出现在页面中时，其标题固定于页面某个位置，类似手机通讯录的字母分栏（非右侧字母条）；
• 元素切换时淡入淡出效果；

实现方式：
以需求1为例，正常定位时样式类名为header, 固定时其样式类名为header-fixed, 具体样式根据实际需求写；样式过渡效果通过CSS属性transition实现；然后通过js逻辑来判断何时需加上固定定位类名，小程序不能操作DOM，因此不能直接为某节点添加类名，是通过改变数据值来实现的；

问题：样式变化是在数据改变后执行的，则需要较频繁地调用setData, 在真机上测试效果，常会出现延迟现象；考虑过使用wx.createAnimation来实现，但最后一步也是要将动画数据绑定到wxml节点上，避免不了这个问题；

你们都是怎么实现样式过渡的，是否遇到此问题，有没有什么更优的方案？

Answer 1

最近也遇到这个问题，一番搜索后用wxs解决了这个问题，回答下供其他小伙伴参考下。

微信官方文档里其实有提到：https://developers.weixin.qq.com/miniprogram/dev/framework/view/interactive-animation.html

大体方法就是将频繁调用setData的逻辑改到wxs中处理，在wxs中可以直接对元素设置 style 和 class。经实测确实可以大幅提升流畅度。