问题分析
setData 工作原理:
小程序的视图层目前使用 WebView 作为渲染载体,而逻辑层是由独立的 JavascriptCore 作为运行环境。在架构上,WebView 和 JavascriptCore 都是独立的模块,并不具备数据直接共享的通道当前,视图层和逻辑层的数据传输,实际上通过两边提供的 evaluateJavascript 所实现。即用户传输的数据,需要将其转换为字符串形式传递,同时把转换后的数据内容拼接成一份 JS 脚本,再通过执行 JS 脚本的形式传递到两边独立环境。
而 evaluateJavascript 的执行会受很多方面的影响,数据到达视图层并不是实时的。
所以,在设置动画的时候,我们要确保数据渲染上之后,在设置动画
解决方法
在动态渲染数据的时候,在this.setData({},callback)的第二个参数内(回调函数内)调用执行动画的方法
this.setData({
data:data
},()=>{
//在这个地方调用执行动画的函数
})