【微信小程序】ColorUI——一个多彩漂亮的UI组件库

前言

作为一个毫无审美的钢铁直男，一个漂亮的UI组件库拯救了我糟糕的前端页面。ColorUI是一个国内大佬写的UI组件库，由于缺少使用文档，所以在使用的过程中难免会出现一些问题，开个坑MARK一下。

一、使用方法

由于我是开发微信小程序使用，因此以小程序为例

1.下载

点击前往

2.将压缩包中demo里的colorui文件夹拷到项目目录

3.在app.wxss中引入文件

@import "colorui/main.wxss";
@import "colorui/icon.wxss";
@import "colorui/animation.wxss";

4.根据DEMO使用

---

二、踩坑

1.动画的使用

app.wxss一定注意要引入，不要忘记！不要忘记！不要忘记！

wxml内容

<image src="/images/lr.png" class="animation-{{animation}}"></image>

js内容

Page({
    data:{
        animation:''
    }
})
onLoad:function(options){
    var dong = this    //异步
    console.log(this.data.animation)
    dong.setData({
      animation: 'shake'    //动画名就是demo上按钮的名字
    })
    console.log(this.data.animation)
    setTimeout(function () {
      dong.setData({
        animation: ''      
      })
    }, 1000)
}

动画需要这样动态操作才可以使用