小程序ui组件库排行-小程序原生高颜值组件库--CoorUI组件库-小程序ui-即速应用

小程序ui组件库排行-小程序原生高颜值组件库--CoorUI组件库-小程序ui

浏览量：1633 时间：2020-03-20 来源：weixin_33937499

简介
1.ColorUI是一个Css类的UI组件库！不是一个Js框架。相比于同类小程序组件库，ColorUI更注重于视觉交互！
2.浏览GitHub：https://github.com/weilanwl/ColorUI
如何使用？先下载源码包
3.→Github
引入到我的小程序
4.将/demo/下的colorui.wxss和icon.wxss复制到小程序的根目录下
5.在app.wxss引入两个文件
@import"icon.wxss";@import"colorui.wxss";复制代码使用模板全新开发
6.复制/template/文件夹并重命名为你的项目，微信开发者工具导入为小程序就可以使用ColorUI了
体验沉浸式导航
7.App.js获取系统参数并写入全局参数。
//App.jsApp({onLaunch:function(){wx.getSystemInfo({success:e={this.globalData.StatusBar=e.statusBarHeight;letcustom=wx.getMenuButtonBoundingClientRect();this.globalData.Custom=custom;this.globalData.CustomBar=custom.bottom+custom.top-e.statusBarHeight;}})}})复制代码
8.Page.js页面配置获取全局参数。
//Page.jsconstapp=getApp()Page({data:{StatusBar:app.globalData.StatusBar,CustomBar:app.globalData.CustomBar,Custom:app.globalData.Custom}})复制代码
9.Page.wxml页面构造导航。更多导航样式请下载Demo查阅操作条组件。
viewclass="cu-custom"style="height:{{CustomBar}}px;"viewclass="cu-barfixedbg-gradual-pink"style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;"navigatorclass='actionborder-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)'textclass='icon-back'/texttextclass='icon-homefill'/text/navigatorviewclass='content'style='top:{{StatusBar}}px;'操作条/view/view/view复制代码自定义系统Tabbar
10.按照官方自定义tabBar配置好Tabbar(开发工具和版本库请使用最新版)。
11.使用ColorUI配置Tabbar只需要更改Wxml页的内容即可。更多Tabbar样式请下载Demo查阅操作条组件。
12./custom-tab-bar/index.wxml
viewclass="cu-bartabbarbg-whiteshadow"viewclass="action"wx:for="{{list}}"wx:key="index"data-path="{{item.pagePath}}"data-index="{{index}}"bindtap="switchTab"viewclass='icon-cu-image'imagesrc='{{selected===index?item.selectedIconPath:item.iconPath}}'class='{{selected===index?"animation":"animation"}}'/image/viewviewclass='{{selected===index?"text-green":"text-gray"}}'{{item.text}}/view/view/view复制代码作者叨叨
13.ColorUI是一个高度自定义的Css样式库，包含了开发常用的元素和组件，元素组件之间也能相互嵌套使用。我也会不定期更新一些扩展到源码。
14.感谢阅读。