济南万速网站建设,湛江住房和城乡建设部网站,电商网站春节放假通知,网站空间流量不够思路#xff1a;
在页面创建的时候#xff0c;创建一个临时动画对象调用 step() 来表示一组动画完成通过动画实例的export方法导出动画数据传递给组件的animation属性还原动画页面卸载的时候#xff0c;清除动画数据
templateview classcontent
在页面创建的时候创建一个临时动画对象调用 step() 来表示一组动画完成通过动画实例的export方法导出动画数据传递给组件的animation属性还原动画页面卸载的时候清除动画数据
templateview classcontentview classitem v-for(item,index) in list :keyitem.idview classleft {{item.memo}} /viewview classright clickpraiseMe(index)image src../../static/praise.png/imageview classfont11点赞/viewview :animationanimationDataArr[index] classpraise-me animation-opacity 1 /view/view/view/view
/templatescript
export default {data() {return {list:[{id:001,memo:苹果},{id:002,memo:橘子},{id:003,memo:草莓},{id:004,memo:香蕉}],animationData: {},animationDataArr: []};},onLoad() {// 1 在页面创建的时候创建一个临时动画对象this.animation uni.createAnimation();this.animationDataArrArray(this.list.length).fill({});},onUnload() {// 5 页面卸载的时候清除动画数据this.animationData {};this.animationDataArrArray(this.list.length).fill({});},methods: {// 实现点赞动画效果praiseMe(index) {// 2 调用 step() 来表示一组动画完成this.animation.translateY(-90).opacity(1).step({duration: 400});// 3 通过动画实例的export方法导出动画数据传递给组件的animation属性this.animationData this.animation;this.animationDataArr[index] this.animationData.export();// 4 还原动画setTimeout(() {this.animation.translateY(0).opacity(0).step({duration: 0});this.animationData this.animation;this.animationDataArr[index] this.animationData.export();}, 600)},}
};
/scriptstyle scoped
.item{display: flex;align-items: center;text-align: center;border: 1px pink solid;margin-top:20rpx ;padding: 20rpx 0;
}
.item image{width: 80rpx;height: 80rpx;z-index: 10;
}
.item .left{flex: 1;
}
.item .right{width: 300rpx;border-left: 1px pink dashed;padding-top: 50rpx;
}.praise-me {font-size: 14px;color: #feab2a;
}.animation-opacity {font-weight: bold;opacity: 0;
}
/style
