uni-app循环动画，点击每个优惠券向右移动消失

阳光穿透心脏的1/2处 2023-06-20 04:53 4阅读 0赞

<view v-for="(item,index) in product" :key="item.id" class="flex" :animation="item.animation_data" @click="receive(index,item.id)" v-if="item.staue">
    						<view class="flex product_price">
    							<view>￥</view>
    							<view>{
       {item.money}}</view>
    						</view>
    						<view class="product_cents">
    							<view class="flex">
    								仅限{
       {item.title}}产品使用
    							</view>
    							<view>有效期：{
       {item.start_time}}至{
       {item.end_time}}</view>
    							<view>满{
       {item.where}}元可以使用</view>
    							<view>点击领取> </view>
    						</view>
    					</view>

uni.request({
    					url: that.url_href+'/index/index/youhuilist',
    					method:'POST',
    					success: (res) => {
    						if(res.data.data.length>0){
    							let arr_data=res.data.data.map((data)=>{
    								let obj={};
    								obj.id=data.id;
    								obj.end_time=data.end_time;
    								obj.money=data.money;
    								obj.start_time=data.start_time;
    								obj.title=data.title;
    								obj.where=data.where;
    								obj.staue=true;
    								obj.animation_data={};
    								return obj
    							});
    							console.log("数据1111111111111111",arr_data)
    							that.product=arr_data;
    						}
    					}
    				});		
    
    
    // 领取优惠券
    			receive(index,id){
    				let that=this;
    				uni.request({
    					url: that.url_href+'/index/index/getyouhui',
    					method:'POST',
    					data:{
    						id:id
    					},
    					success: (res) => {
    						console.log("结果",res)
    						if(res.data.code==1){
    							uni.showToast({
    								icon:'none',
    							    title: res.data.msg,
    							    duration: 500
    							});
    							that.product[index].animation_data = uni.createAnimation({
    								duration:500,
    								timingFunction:'linear',
    								delay:100
    							});
    							that.product[index].animation_data.translateX(that.windowWidth).step();
    							setTimeout(function(){
    								that.product[index].staue=false;					
    							},600);
    						}else{
    							uni.showToast({
    								icon:'none',
    							    title: res.data.msg,
    							    duration: 2000
    							});
    						}
    					}
    				});		
    			}

点击每个优惠券时，创建动画，向右移动 ，直至消失

uni-app动画：[https://uniapp.dcloud.io/api/ui/animation?id=unicreateanimationobject][https_uniapp.dcloud.io_api_ui_animation_id_unicreateanimationobject]

如果有帮到你的话，欢迎激励一下作者。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70][]

[https_uniapp.dcloud.io_api_ui_animation_id_unicreateanimationobject]: https://uniapp.dcloud.io/api/ui/animation?id=unicreateanimationobject
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210308154227667.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0JyaWdodDIwMTc=,size_16,color_FFFFFF,t_70