Awesome
微信小程序 wepyjs 第三方 点赞动画插件
效果:
使用
安装组件
npm install wepy-nices --save
引入组件
<template>
<view catchtap="dosomethings">
<nices :active.sync="active" :params.sync="params"></nices>
</view>
</template>
<script>
import wepy from 'wepy';
import nices from 'wepy-nices';
export default class Index extends wepy.page {
data={
active:false, //必填 状态 true 已点赞 false为点赞
params:{ //选填 动画效果配置
animate:'bounceIn', //选填 点赞图标动画
activeColor:'yellow', //选填 已点赞图标颜色
color:'#000', //选填 未点赞图标颜色
enableCancel:false //选填 是否可取消点赞
}
}
components = {
nices
};
onLoad(){
}
}
</script>
注意 1.可用标签包住组件,触发自己的事件,改变active的值从而出发动画效果。 2.也可不用标签包住,组件自带切换事件,但紧切换,不返回或触发时间。 主要是因为考虑需要用多个时 repeat 更方便操作。所以使用1即可满足大部分需求。
###animate
动画效果引用了animate.min.scss
animate | |||
---|---|---|---|
bounce | flash | pulse | rubberBand |
shake | headShake | swing | tada |
wobble | jello | bounceIn | bounceInDown |
bounceInLeft | bounceInRight | bounceInUp | bounceOut |
bounceOutDown | bounceOutLeft | bounceOutRight | bounceOutUp |
fadeIn | fadeInDown | fadeInDownBig | fadeInLeft |
fadeInLeftBig | fadeInRight | fadeInRightBig | fadeInUp |
fadeInUpBig | fadeOut | fadeOutDown | fadeOutDownBig |
fadeOutLeft | fadeOutLeftBig | fadeOutRight | fadeOutRightBig |
fadeOutUp | fadeOutUpBig | flipInX | flipInY |
flipOutX | flipOutY | lightSpeedIn | lightSpeedOut |
rotateIn | rotateInDownLeft | rotateInDownRight | rotateInUpLeft |
rotateInUpRight | rotateOut | rotateOutDownLeft | rotateOutDownRight |
rotateOutUpLeft | rotateOutUpRight | hinge | jackInTheBox |
rollIn | rollOut | zoomIn | zoomInDown |
zoomInLeft | zoomInRight | zoomInUp | zoomOut |
zoomOutDown | zoomOutLeft | zoomOutRight | zoomOutUp |
slideInDown | slideInLeft | slideInRight | slideInUp |
slideOutDown | slideOutLeft | slideOutRight | slideOutUp |
更新日志
日期 | 版本 | 说明 |
---|---|---|
20180323 | 0.0.1 | init |