Giter Club home page Giter Club logo

wepy-nices's Introduction

微信小程序 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
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

本人博客:callmesoul.cn

toast

wepy-nices's People

Contributors

callmesoul avatar

Watchers

James Cloos avatar 张海刚 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.