setData优化过程

https://blog.csdn.net/rolan1993/article/details/88106343

 

在做一个小球跟随手指移动的效果时候，由于在touchmove事件中频繁调用setData改变小球的位移实现，在开发工具和IOS平台还算流畅，但在安卓机下手机预览出现极其卡顿的交互，简直是不堪入目。

问题根源：

setData每秒调用高达50左右造成的。 引用官方的话就是：

a、touchmove 事件从视图层（Webview）抛到逻辑层（App Service）

b、逻辑层（App Service）处理 touchmove 事件，再通过 setData 来改变 组件 的位置

一次 touchmove 的响应需要经过 2 次的逻辑层和渲染层的通信以及一次渲染，通信的耗时比较大。此外 setData 渲染也会阻塞其它脚本执行，导致了整个用户交互的动画过程会有延迟。

如何优化？

1.使用movable-view

movable-view + movable-area可实现移动效果很流畅，但是也有局限性不能满足复杂的需求，例如现在需求需要是两个小球使用两个手指能同时控制小球移动，则无法实现，还需要配合setData来实现，使用了setData必然会出现卡顿

2.推荐方案：抛弃setData,使用wxs来写交互