molong/coloruicss
1
0
Fork 0
mirror of https://github.com/weilanwl/coloruicss.git synced 2026-06-06 21:54:00 +08:00
Code Issues Packages Projects Releases Wiki Activity

v2.0.6

Browse Source 
1.修复行距带来的垂直不居中问题
2.优化操作条组件，新增多种样式
3.优化背景颜色（某些组件的默认背景调整,移除一些important）
4.更新动画扩展5.优化按钮,标签,头像的大小
This commit is contained in:
Weilanwl
2019-02-09 16:57:35 +08:00
parent dbe5f7c892
commit 122f46b8d4
70 changed files with 2812 additions and 1791 deletions
Download Patch File Download Diff File Expand all files Collapse all files
demo/pages/about/about/about.js
+10 -62
View File
@@ -1,66 +1,14 @@
// pages/about/about/about.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
onLoad: function () { },
pageBack() {
wx.navigateBack({
delta: 1
});
}
})
});
demo/pages/about/about/about.json
+1 -3
View File
@@ -1,3 +1 @@
{
"usingComponents": {}
}
{}
demo/pages/about/about/about.wxml
+18 -2
View File
@@ -1,2 +1,18 @@
<!--pages/about/about/about.wxml-->
<text>pages/about/about/about.wxml</text>
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 关于
</navigator>
</view>
</view>
<view class='margin-xl bg-white padding-xl radius shadow-lg'>
<view class='text-center margin-bottom text-lg text-grey'>关于ColorUI组件库</view>
<view class='text-content'>
<view>Hi！开发者~欢迎使用ColorUI组件库！</view>
<view class='margin-top-sm'>该项目是我个人开发的一款高颜值的微信小程序组件库。这个项目不仅有一些漂亮的基础元素，还有一些实用的组件。扩展中心也会不定期更新一些小程序的解决方案，或者你有一些好的想法可以在GitHub里提交给我，我会加入到扩展里。</view>
<view class='margin-top-sm'>项目是开源的，不收取任何费用，如果这个项目有帮到你，或者你觉得很赞，可以在GitHub里扫描赞赏码支持一下！</view>
<view class='margin-top-sm'>该项目你可以用到除组件库小程序的任何项目。作者我也是花了时间和精力的，我不希望你拷贝一份，做一些修改发布就变成了一个独立的项目，当然！扩展再发布是可以的，但前提是注明一下我这个原作者٩(๑❛ᴗ❛๑)۶</view>
<view class='margin-top-sm'>更多功能敬请期待！</view>
</view>
</view>
demo/pages/about/about/about.wxss
+27 -1
View File
@@ -1 +1,27 @@
/* pages/about/about/about.wxss */
.UCenter-bg {
background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
background-size: cover;
height: 700rpx;
display: flex;
justify-content: center;
padding-top: 40rpx;
overflow: hidden;
position: relative;
flex-direction: column;
align-items: center;
color: #fff;
font-weight: 300;
text-shadow: 0 0 3px rgba(0,0,0,0.3);
}
.UCenter-bg text{
opacity: 0.8;
}
.UCenter-bg image {
width: 250rpx;
height: 250rpx;
}
.UCenter-bg .animation-wave {
position: absolute;
bottom: 0;
}
demo/pages/about/home/home.js
+79 -61
View File
@@ -1,66 +1,84 @@
// pages/about/home/home.js
Page({
/**
* 页面的初始数据
*/
Component({
data: {
starCount: 0,
forksCount: 0,
visitTotal: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
methods: {
onLoad(options) {
let that = this;
wx.showLoading({
title: '数据加载中',
mask: true,
})
let i = 0;
numDH();
function numDH() {
if (i < 20) {
setTimeout(function() {
that.setData({
visitTotal: i,
forksCount: i,
visitTotal: i
})
i++
numDH();
}, 20)
} else {
that.setData({
starCount: that.coutNum(999),
forksCount: that.coutNum(8888),
visitTotal: that.coutNum(77777)
})
}
}
wx.hideLoading()
},
coutNum(e) {
if (e > 1000 && e < 10000) {
e = (e / 1000).toFixed(1) + 'k'
}
if (e > 10000) {
e = (e / 10000).toFixed(1) + 'W'
}
return e
},
CopyLink(e) {
wx.setClipboardData({
data: e.currentTarget.dataset.link,
success: res => {
wx.showToast({
title: '已复制',
duration: 1000,
})
}
})
},
showModal(e) {
this.setData({
modalName: e.currentTarget.dataset.target
})
},
hideModal(e) {
this.setData({
modalName: null
})
},
showQrcode() {
wx.previewImage({
urls: ['https://image.weilanwl.com/color2.0/zanCode.jpg'],
current: 'https://image.weilanwl.com/color2.0/zanCode.jpg' // 当前显示图片的http链接
})
},
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
pageLifetimes: {
show() {
if (typeof this.getTabBar === 'function' &&
this.getTabBar()) {
this.getTabBar().setData({
selected: 3
})
}
}
}
})
demo/pages/about/home/home.json
+1 -3
View File
@@ -1,3 +1 @@
{
"usingComponents": {}
}
{}
demo/pages/about/home/home.wxml
+80 -2
View File
@@ -1,2 +1,80 @@
<!--pages/about/home/home.wxml-->
<text>pages/about/home/home.wxml</text>
<view class='UCenter-bg'>
<image src='/images/logo.png' class='png' mode='widthFix'></image>
<view class='text-xl'>ColorUI组件库
<text class='text-df'>v2.0</text>
</view>
<view class='margin-top-sm'>
<text>By:文晓港</text>
</view>
<image src='https://image.weilanwl.com/gif/wave.gif' mode='scaleToFill' class='gif-wave'></image>
</view>
<view class='padding flex text-center text-grey bg-white shadow-warp'>
<view class='flex flex-sub flex-direction solid-right'>
<view class="text-xxl text-orange">{{visitTotal}}</view>
<view class="margin-top-sm">
<text class='icon-attentionfill'></text> View</view>
</view>
<view class='flex flex-sub flex-direction solid-right'>
<view class="text-xxl text-blue">{{starCount}}</view>
<view class="margin-top-sm">
<text class='icon-favorfill'></text> Star</view>
</view>
<view class='flex flex-sub flex-direction'>
<view class="text-xxl text-green">{{forksCount}}</view>
<view class="margin-top-sm">
<text class='icon-fork'></text> Fork</view>
</view>
</view>
<view class="cu-list menu card-menu margin-top-xl margin-bottom-xl shadow-lg">
<view class="cu-item arrow">
<view class='content' bindtap='CopyLink' data-link='https://github.com/weilanwl/ColorUI'>
<text class='icon-github text-grey'></text>
<text class='text-grey'>GitHub</text>
</view>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../about/about' hover-class='none'>
<image src='/images/logo.png' class='png' mode='aspectFit'></image>
<text class='text-grey'>关于ColorUI组件库</text>
</navigator>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../log/log' hover-class='none'>
<text class='icon-formfill text-green'></text>
<text class='text-grey'>日志</text>
</navigator>
</view>
<view class="cu-item arrow">
<view class='content' bindtap="showQrcode">
<text class='icon-appreciatefill text-red'></text>
<text class='text-grey'>赞赏支持</text>
</view>
</view>
<view class="cu-item arrow">
<button class='cu-btn content' open-type='feedback'>
<text class='icon-writefill text-cyan'></text>
<text class='text-grey'>意见反馈</text>
</button>
</view>
<view class="cu-item arrow">
<navigator class='content' url='../test/list' hover-class='none'>
<text class='icon-creativefill text-orange'></text>
<text class='text-grey'>Bug测试</text>
</navigator>
</view>
</view>
<view class="cu-modal {{modalName=='QrcodeModal'?'show':''}}">
<view class="cu-dialog">
<view class="bg-img" style="background-image: url('https://image.weilanwl.com/color2.0/zanCode.jpg');height:544rpx;">
<view class="cu-bar justify-end none-bg text-white">
<view class='action' bindtap='hideModal'>
<text class='icon-close '></text>
</view>
</view>
</view>
<view class="cu-bar">
<view class='justify-center flex-sub' bindtap='SaveQrcode'>保存到相册</view>
</view>
</view>
</view>
demo/pages/about/home/home.wxss
+39 -1
View File
@@ -1 +1,39 @@
/* pages/about/home/home.wxss */
page{
padding-bottom: 100rpx;
}
.UCenter-bg {
background-image: url(https://image.weilanwl.com/color2.0/index.jpg);
background-size: cover;
height: 550rpx;
display: flex;
justify-content: center;
padding-top: 40rpx;
overflow: hidden;
position: relative;
flex-direction: column;
align-items: center;
color: #fff;
font-weight: 300;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
}
.UCenter-bg text {
opacity: 0.8;
}
.UCenter-bg image {
width: 200rpx;
height: 200rpx;
}
.UCenter-bg .gif-wave{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
z-index: 99;
mix-blend-mode: screen;
height: 100rpx;
}
demo/pages/about/log/log.js
+10 -62
View File
@@ -1,66 +1,14 @@
// pages/about/log/log.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
onLoad: function () { },
pageBack() {
wx.navigateBack({
delta: 1
});
}
})
});
demo/pages/about/log/log.json
+1 -3
View File
@@ -1,3 +1 @@
{
"usingComponents": {}
}
{}
demo/pages/about/log/log.wxml
+99 -2
View File
@@ -1,2 +1,99 @@
<!--pages/about/log/log.wxml-->
<text>pages/about/log/log.wxml</text>
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> <text class='text-cut'>日志</text>
</navigator>
</view>
</view>
<view class="cu-timeline">
<view class='cu-item text-green'>
<view class="bg-gradual-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.6</view>
<view class="cu-tag line-white">2019/02/09</view>
</view>
<view class='margin-top-sm text-content'>
<view>1.修复行距带来的垂直不居中问题</view>
<view>2.优化操作条组件，新增多种样式</view>
<view>3.优化背景颜色（某些组件的默认背景调整,移除一些important）</view>
<view>4.更新动画扩展</view>
<view>5.优化按钮,标签,头像的大小</view>
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.5</view>
<view class="cu-tag line-white">2019/01/13</view>
</view>
<view class='margin-top-sm text-content'>
<view>1.修复时间线图标显示问题</view>
<view>2.switch、radio、checkbox单位改成px，抛弃小尺寸</view>
<view>3.更新多种窗口组件</view>
<view>4.更新多种动画</view>
<view>5.新增步骤条组件</view>
<view>6.优化列表组件，新增左滑操作</view>
<view>7.优化图标搜索</view>
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.4</view>
<view class="cu-tag line-white">2019/01/10</view>
</view>
<view class='margin-top-sm text-content'>
<view>1.抛弃标签选择器，改成类名选择器</view>
<view>2.动画改成Gif，并新增动画</view>
<view>3.修复一些图标错位问题</view>
<view>4.修复头像文字显示问题</view>
<view>* 建议先备份，再全局替换标签。</view>
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.3</view>
<view class="cu-tag line-white">2019/01/06</view>
</view>
<view class='margin-top-sm text-content'>
<view>1.修复一些单位错误（带输入框的操作条）</view>
<view>2.纠正一些单词拼写...</view>
<view>3.抛弃icon标签，改回text标签的写法</view>
<view>4.抛弃px单位的样式文件</view>
<view>5.优化一些组件的字体大小</view>
<view>6.新增两种加载样式</view>
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.2</view>
<view class="cu-tag line-white">2018/12/24</view>
</view>
<view class='margin-top-sm text-content'>
<view>1.首页增加分享</view>
<view>2.卡片页修复switch开关问题</view>
<view>3.优化首页动画效果（ios表现不佳）</view>
<view>4.表单新增Picker</view>
<view>5.增加赞赏码！请多多支持！</view>
<view>6.新增反馈与Bug测试</view>
<view>7.优化轮播组件</view>
<view>8.优化Bar组件文字描述过多的场景</view>
</view>
</view>
</view>
<view class='cu-item text-green'>
<view class="bg-green content shadow-blur">
<view class="cu-capsule radius">
<view class="cu-tag bg-white text-green">v2.0.1</view>
<view class="cu-tag line-white">2018/12/20</view>
</view>
<view class='margin-top-sm text-content'>2.0新版本上线</view>
</view>
</view>
</view>
demo/pages/about/log/log.wxss
+3 -1
View File
@@ -1 +1,3 @@
/* pages/about/log/log.wxss */
page {
background: #fff;
}
demo/pages/about/test/filter.js
+13 -62
View File
@@ -1,66 +1,17 @@
// pages/about/test/filter.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
scrollLeft: 0,
TabCur: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
tabSelect(e) {
console.log(e);
this.setData({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
});
demo/pages/about/test/filter.wxml
+28 -2
View File
@@ -1,2 +1,28 @@
<!--pages/about/test/filter.wxml-->
<text>pages/about/test/filter.wxml</text>
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> <text>filter：blur引起的ios花屏测试</text>
</navigator>
</view>
</view>
<scroll-view scroll-x class="bg-white nav" scroll-with-animation scroll-left="{{scrollLeft}}">
<view class="cu-item {{index==TabCur?'text-green cur':''}}" wx:for="{{10}}" wx:key bindtap='tabSelect' data-id="{{index}}">
Tab{{index}}
</view>
</scroll-view>
<view class='padding margin'>
<view class="shadow-blur bg-red ABox" style='animation: show 1s 1;-webkit-animation: show 1s 1;'>阴影层</view>
</view>
<view class='padding margin'>
<view class="shadow-blur bg-orange ABox">去掉动画</view>
</view>
<view class='padding margin'>
<view class="shadow-blur bg-blue Box" style='animation: show 1s 1;-webkit-animation: show 1s 1;'>去掉after</view>
</view>
<view class='padding margin'>
<view class="shadow-blur bg-green Box">去掉动画和after</view>
</view>
demo/pages/about/test/filter.wxss
+20 -1
View File
@@ -1 +1,20 @@
/* pages/about/test/filter.wxss */
.ABox ,.Box {
padding: 30rpx;
border-radius: 12rpx;
position: relative;
z-index: 1;
}
.ABox::after {
content: "";
position: absolute;
z-index: -1;
background-color: inherit;
width: 100%;
height: 100%;
left: 0;
bottom: -20rpx;
border-radius: 10rpx;
opacity: 0.2;
transform: scale(0.9, 0.9);
}
demo/pages/about/test/list.js
+13 -62
View File
@@ -1,66 +1,17 @@
// pages/about/test/list.js
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
StatusBar: app.globalData.StatusBar,
CustomBar: app.globalData.CustomBar,
ColorList: app.globalData.ColorList,
scrollLeft: 0,
TabCur: 0,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
tabSelect(e) {
console.log(e);
this.setData({
TabCur: e.currentTarget.dataset.id,
scrollLeft: (e.currentTarget.dataset.id - 1) * 60
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
});
demo/pages/about/test/list.wxml
+15 -2
View File
@@ -1,2 +1,15 @@
<!--pages/about/test/list.wxml-->
<text>pages/about/test/list.wxml</text>
<view class="cu-custom" style="height:{{CustomBar}}px;">
<view class="cu-bar fixed bg-gradual-green" style="height:{{CustomBar}}px;padding-top:{{StatusBar}}px;">
<navigator class='action' open-type="navigateBack" delta="1" hover-class="none">
<text class='icon-back'></text> 测试
</navigator>
</view>
</view>
<view class='padding margin'>
<navigator url='filter' class='bg-grey padding radius'>
<text>filter：blur引起的ios花屏测试</text>
</navigator>
<!-- <navigator url='filter' class='bg-grey padding radius margin-top'>
<text>filter：blur引起的ios花屏测试</text>
</navigator> -->
</view>
demo/pages/about/test/list.wxss
+1 -1
View File
@@ -1 +1 @@
/* pages/about/test/list.wxss */
/* miniprogram/pages/about/test/list.wxss */