uniapp点赞数量加1效果
文章描述：
uniapp如何实现点赞时加1效果
template
<template>
<view class="page">
<view class="loop">
<view class="item" v-for="(item,index) in lists">
<view class="title">{{item}}</view>
<view class="like" :data-index="index" @click="praiseMe(index)">
<view class="icon"></view>
<view :animation="animationData[index]" class="praise-me animation-opacity" >+1</view>
</view>
</view>
</view>
</view>
</template>script
export default{
data(){
return{
lists:[1,2,3,4,5,6],
animationData: {}, //动画实例初始化
}
},
onLoad() {
//页面加载时创建一个动画
this.animation = uni.createAnimation();
},
methods:{
praiseMe:function(e){
console.log(e)
var id = e;
this.animation.translateY(-80).opacity(1).step({duration: 800});
this.animationData = {};
this.animationData[id] = this.animation.export();
setTimeout(()=>{
this.animation.translateY(0).opacity(0).step({duration: 0})
this.animationData = {};
this.animationData[id] = this.animation.export();
},500);
}
}
}style
.page{
padding: 20upx 32upx;
}
.loop .item{
padding: 32upx 0;
background: #eee;
margin-bottom: 5upx;
display: flex;
justify-content: space-between;
}
.title{
color: #333;
padding: 0 0 0 20upx;
}
.like{
display: flex;
justify-content: space-between;
position: relative;
}
.like .icon{
width: 40upx;
height: 40upx;
background:#A3D5FA;
border-radius: 50%;
margin-right: 20upx;
}
.praise-me {
position: absolute;
top: 0;
left: 10%;
font-size: 24upx;
color: #E02020;
align-self: center;
}
.animation-opacity{
font-weight: bold;
color: #E02020;
opacity: 0;
}
发布时间：2021/11/30
发表评论