文章目錄

• 前言
• 一、使用方法
• • 1.下載
  • 2.將壓縮包中demo里的colorui文件夾拷到項目目錄
  • 3.在app.wxss中引入文件
  • 4.根據DEMO使用
• 二、踩坑
• • 1.動畫的使用

前言

作為一個毫無審美的鋼鐵直男，一個漂亮的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) }

動畫需要這樣動態操作才可以使用

總結

以上是生活随笔為你收集整理的【微信小程序】ColorUI——一个多彩漂亮的UI组件库的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。