小程序给v-for生成的元素随机值不生效

本文链接：https://blog.csdn.net/weixin_45272449/article/details/129884584

项目场景：

今天用uni-app开发项目时写了个动画，让v-for生成的每个元素不同的上下浮动。
起初觉得挺简单的因为浮动动画都一样的，只要给每个元素一个很小时间的延迟间隔（animation-delay）就可以了。

<view 
:style="{animationDelay:Math.random()+'s'}" 
class="dropBox" 
v-for="index in 7" :key="index">
	元素{{index}}
</view>

问题描述

写完突然发现所有元素的都是同一个步调浮动的，所有元素的animation-delay样式都是同一个随机数。
在这里插入图片描述

然后我还以为是这写法有问题，以防万一运行成H5页面看了下效果，发现在H5页面的是有效的，每个元素都是不同的延迟间隔。
在这里插入图片描述

原因分析：

然后查了下发现有这么个说法：
可能是因为小程序中的虚拟DOM渲染和H5的虚拟DOM渲染不同，在小程序中，每个组件都有自己的虚拟DOM树，而在H5中，整个页面只有一个虚拟DOM树。因此，当你使用v-for循环生成元素时，在小程序中每个元素的虚拟DOM树都是相互独立的，而在H5中所有元素共享同一个虚拟DOM树。

解决方案：

因此，在小程序中，需要确保为每个元素生成不同的animation-delay值，可以尝试使用index变量来生成不同的延迟时间，或者使用其他方法来生成随机的延迟时间，以确保每个元素的animation-delay值都不同。
如果你在H5中测试你的代码，你可能会发现所有元素的animation-delay值都是不同的。这是因为在H5中，所有元素共享同一个虚拟DOM树，因此每个元素的索引变量index是唯一的，并且将生成不同的animation-delay值。
以下是我在样式里调用了下index的代码，然后就发现有效果了，每个元素的animation-delay值都不同了。

<view 
:style="{animationDelay:index==0?Math.random()+'s':Math.random()*index/index+'s'}" 
class="dropBox" 
v-for="(item,index) in 7" :key="index">
	元素{{index}}
</view>