小程序原生高颜值组件库--ColorUI组件库
发布时间:2020-12-14 19:23:16 所属栏目:资源 来源:网络整理
导读:简介 ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互! 浏览GitHub:https://github.com/weilanwl/ColorUI 如何使用? 先下载源码包 →?Github 引入到我的小程序 将? /demo/ ?下的? colorui.wxss ?和? ico
简介ColorUI是一个Css类的UI组件库!不是一个Js框架。相比于同类小程序组件库,ColorUI更注重于视觉交互! 浏览GitHub:https://github.com/weilanwl/ColorUI 如何使用?先下载源码包→?Github 引入到我的小程序将?/demo/?下的?colorui.wxss?和?icon.wxss?复制到小程序的根目录下 在?app.wxss?引入两个文件 @import "icon.wxss";
@"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: CustomBar,0);">Custom: Custom
}
})
复制代码
Page.wxml 页面构造导航。更多导航样式请下载Demo查阅?操作条组件?。 <view class="cu-custom" style="height:{{CustomBar}}px;">
<"cu-bar fixed bg-gradual-pink" style=}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>
<'icon-homefill'></text>
</navigator>
<'content' style='top:}px;'>操作条</view>
</view>
</view>
复制代码
自定义系统Tabbar按照官方自定义 tabBar 配置好Tabbar (开发工具和版本库请使用最新版)。 使用ColorUI配置Tabbar只需要更改 Wxml 页的内容即可。 更多Tabbar样式请下载Demo查阅?操作条组件?。 /custom-tab-bar/index.wxml>
<image src='{{selected === index ? item.selectedIconPath : item.iconPath}}' class={{selected === index ? "animation" : "animation"}}'></image>
</view>
<{{selected === index ? "text-green" : "text-gray"}}'>{{item.text}}</ |