25
收藏
评论

小程序原生高颜值组件库--ColorUI

开源推荐!注重视觉交互的高颜值第三方组件库--ColorUI组件库。

简介

ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互!

浏览GitHub:https://github.com/weilanwl/ColorUI

如何使用?

先下载源码包

Github

引入到我的小程序

/demo/ 下的 colorui.wxssicon.wxss 复制到小程序的根目录下

app.wxss 引入两个文件

@import "icon.wxss";
@import "colorui.wxss";

使用模板全新开发

复制 /template/ 文件夹并重命名为你的项目,微信开发者工具导入为小程序就可以使用ColorUI了

体验沉浸式导航

App.js
获取系统参数并写入全局参数。

//App.js
App({
  onLaunch: function() {
    wx.getSystemInfo({
      success: e => {
        this.globalData.StatusBar = e.statusBarHeight;
        let custom = wx.getMenuButtonBoundingClientRect();
        this.globalData.Custom = custom;  
        this.globalData.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
      }
    })
  }
})

Page.js
页面配置获取全局参数。

//Page.js
const app = getApp()
Page({
  data: {
    StatusBar: app.globalData.StatusBar,
    CustomBar: app.globalData.CustomBar,
    Custom: app.globalData.Custom
  }  
})

Page.wxml
页面构造导航。更多导航样式请下载Demo查阅 操作条组件

<view class="cu-custom" style="height:{{CustomBar}}px;">
  <view class="cu-bar fixed bg-gradual-pink" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
    <navigator class='action border-custom' open-type="navigateBack" delta="1" hover-class="none" style='width:{{Custom.width}}px;height:{{Custom.height}}px;margin-left:calc(750rpx - {{Custom.right}}px)'>
      <text class='icon-back'></text>
      <text class='icon-homefill'></text>
    </navigator>
    <view class='content' style='top:{{StatusBar}}px;'>操作条</view>
  </view>
</view>

自定义系统Tabbar

按照官方 自定义 tabBar 配置好Tabbar (开发工具和版本库请使用最新版)。

使用ColorUI配置Tabbar只需要更改 Wxml 页的内容即可。
更多Tabbar样式请下载Demo查阅 操作条组件

/custom-tab-bar/index.wxml

 <view class="cu-bar tabbar bg-white shadow">
  <view class="action" wx:for="{{list}}" wx:key="index" data-path="{{item.pagePath}}" data-index="{{index}}" bindtap="switchTab">
    <view class='icon-cu-image'>
      <image src='{{selected === index ? item.selectedIconPath : item.iconPath}}' class='{{selected === index ? "animation" : "animation"}}'></image>
    </view>
    <view class='{{selected === index ? "text-green" : "text-gray"}}'>{{item.text}}</view>
  </view>
</view>

作者叨叨

ColorUI是一个高度自定义的Css样式库,包含了开发常用的元素和组件,元素组件之间也能相互嵌套使用。我也会不定期更新一些扩展到源码。

其实大家都在催我写文档,但这个库源码就在这,所见即所得,粘贴复制就可以得到你想要的页面。当然,文档我还是要写的,也希望大家多多提意见。

现在前端的开发方向基本都是奔着Js方向的,布局和样式大家讨论的有点少。以后我会在开发者社区多聊一聊关于开发中的布局和样式。

感谢阅读。

最后一次编辑于  02-26  (未经腾讯允许,不得转载)
复制链接赞 25收藏投诉评论

45 个评论

  • 释怀
    释怀
    02-25

    已经很少有人能把CSS写得这么全面这么规范了,大家也可以方便的把样式用到自己的框架/组件中去。

    02-25
    赞同 9
    回复
  • 、WWTT
    、WWTT
    02-25

    群主牛逼!!!

    02-25
    赞同 5
    回复
  • 养乐多
    养乐多
    02-25

    牛逼!

    02-25
    赞同 5
    回复
  • 麋鹿-Moonsic
    麋鹿-Moonsic
    02-25

    晓港牛逼!

    02-25
    赞同 4
    回复 3
    • 麋鹿-Moonsic
      麋鹿-Moonsic
      02-25

      我的小程序就是用群主的组件写的,可以点我头像看看。

      02-25
      1
      回复
    • 叫我小丹呀
      叫我小丹呀
      02-27回复麋鹿-Moonsic

      想问一下,你这个小程序是使用的百度地图还是高德地图

      02-27
      1
      回复
    • 麋鹿-Moonsic
      麋鹿-Moonsic
      02-27回复叫我小丹呀

      用的是腾讯地图,毕竟是腾讯家的小程序,所以我就用了腾讯地图,其他地图应该也可以吧,我没试过。

      02-27
      1
      回复
  • 可我会像
    可我会像
    02-25

    群主牛逼啊

    02-25
    赞同 4
    回复
  • 王祖欢
    王祖欢
    02-25

    我用的就是,楼主很厉害

    02-25
    赞同 3
    回复
  • Oops
    Oops
    02-25

    晓港流批

    02-25
    赞同 3
    回复
  • 山东086
    山东086
    02-25

    群主牛逼!支持一波

    02-25
    赞同 3
    回复
  • Kit
    Kit
    02-27

    晓港这个大胖子,我反手就是一个赞

    02-27
    赞同 2
    回复
  • 深海蛙人
    深海蛙人
    02-26

    反手就是一个赞

    02-26
    赞同 1
    回复