uni-app循環動畫,點擊每個優惠券向右移動消失

<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

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章