小程序 wx:for 为每个循环出来的view，添加相同的动画，并且互不影响

最新推荐文章于 2024-08-14 17:02:59 发布

美的人是吃货

最新推荐文章于 2024-08-14 17:02:59 发布

阅读量2.6k

点赞数 1

分类专栏：小程序

本文链接：https://blog.csdn.net/ITLISHUANG/article/details/89454820

版权

本文介绍如何在微信小程序中利用wx:for为每个循环元素添加独立动画，详细阐述了静态页面布局、样式设置以及动态效果实现的关键步骤，特别是通过设置不同的动画状态确保各元素动画互不影响。

摘要由CSDN通过智能技术生成

写在前：想实现通过wx:for 为每个循环出来的元素添加动画，并且动画之间互不影响，自定义写法

描述：添加多个地址，想要删除其中的任意一个的时候有一些动态效果，向左后向右滑动删除

复现第一步：首先是静态页面布局和一些简单的样式

<!-- 因为数据是渲染的所以，所以如果你只复制html 到你的项目将什么都不显示 -->
<view class="addbox">
	<block wx:for="{
  {region}}" wx:for-index="i" wx:key="index">
		<view wx:if="{
  {item.termshow}}" data-ceshid="{
  {item.termclear}}" animation="{
  {animationList[i]}}" class="addtrem">
			<view class="{
  {state ? 'trem' :'termhei'}}">
				<view class="term-content row">
					<image src="{
  {item.termimage}}"&g