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

bolelee
  • 1.2k

需求场景:

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

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

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

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

回复
阅读 9.4k
1 个回答
dwent
  • 3
新手上路,请多包涵
宣传栏