一、ColorUI

本文轉載自查看原文 2020-05-30 16:38 1857 微信小程序

一、ColorUI

https://www.color-ui.com

解壓

1、使用方式新建小程序，並將demo目錄的colorui文件夾復制到小程序根目錄

具體

使用，在index.wxml中直接使用。（沒有官方文檔，你只能邊對照colorui案例，邊做。）

index.wxml

<view class="padding flex flex-direction">
  <button class="cu-btn bg-grey lg">玄灰</button>
  <button class="cu-btn bg-red margin-tb-sm lg">嫣紅</button>
</view>

效果如下

2、使用方式（ColorUI是一個Css類的UI組件庫！不是一個Js框架。相比於同類小程序組件庫，ColorUI更注重於視覺交互！）

將里面的兩個文件icon.wxss和main.wxss復制到你的項目下

之后再在app.wxss里面寫入：

@import "icon.wxss";

@import "main.wxss";

二、使用樣例

代碼

<scroll-view scroll-x class="bg-white nav">
    <view class="flex text-center">
      <view class="cu-item flex-sub {{index==TabCur?'text-green cur':''}}" wx:for="{{5}}" wx:key bindtap="tabSelect" data-id="{{index}}">
        <text class="text-xl text-bold text-green">{{navList[index].title}}</text>
      </view>
    </view>
  </scroll-view>

<swiper current="{{TabCur}}" class='swiper' style="height:600px;" duration="300" bindchange="bindchange">
     <swiper-item>
      <view class='swiper_con'>welcome come to 關注</view>
    </swiper-item>
     <swiper-item>
      <view class='swiper_con'>welcome come to 推薦</view>
    </swiper-item>
     <swiper-item>
      <view class='swiper_con'>welcome come to 精華</view>
    </swiper-item>
     <swiper-item>
      <view class='swiper_con'>welcome come to 視頻</view>
    </swiper-item>
     <swiper-item>
      <view class='swiper_con'>welcome come to 娛樂</view>
    </swiper-item>
 </swiper>

如下js

Page({
  data: {
    TabCur: 0,
    scrollLeft: 0,
    navList: [{
      index: 0,
      title: "關注"
    }, {
      index: 1,
      title: "推薦"
    }, {
      index: 2,
      title: "精華"
    }, {
      index: 3,
      title: "視頻"
    }, {
      index: 4,
      title: "娛樂"
    }]
  },
  tabSelect(e) {
    this.setData({
      TabCur: e.currentTarget.dataset.id,
      scrollLeft: (e.currentTarget.dataset.id - 1) * 60
    })
  }
})