Home

Awesome

微信小程序 wepyjs 第三方 点赞动画插件

效果:

mark

使用

安装组件

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
bounceflashpulserubberBand
shakeheadShakeswingtada
wobblejellobounceInbounceInDown
bounceInLeftbounceInRightbounceInUpbounceOut
bounceOutDownbounceOutLeftbounceOutRightbounceOutUp
fadeInfadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInRightfadeInRightBigfadeInUp
fadeInUpBigfadeOutfadeOutDownfadeOutDownBig
fadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpfadeOutUpBigflipInXflipInY
flipOutXflipOutYlightSpeedInlightSpeedOut
rotateInrotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpLeftrotateOutUpRighthingejackInTheBox
rollInrollOutzoomInzoomInDown
zoomInLeftzoomInRightzoomInUpzoomOut
zoomOutDownzoomOutLeftzoomOutRightzoomOutUp
slideInDownslideInLeftslideInRightslideInUp
slideOutDownslideOutLeftslideOutRightslideOutUp

更新日志

日期版本说明
201803230.0.1init

本人博客:callmesoul.cn

toast