mirror of
https://github.com/weilanwl/coloruicss.git
synced 2026-03-13 11:34:02 +08:00
v2.0.5
1.修复时间线图标显示问题 2.switch、radio、checkbox单位改成px，抛弃小尺寸 3.更新多种窗口组件 4.更新多种动画 5.新增步骤条组件 6.优化列表组件，新增右滑操作 7.优化图标搜索
This commit is contained in:
Weilanwl
48
demo/pages/component/steps/steps.js
Normal file
48
demo/pages/component/steps/steps.js
Normal file
@@ -0,0 +1,48 @@
|
||||
const app = getApp();
|
||||
Page({
|
||||
data: {
|
||||
StatusBar: app.globalData.StatusBar,
|
||||
CustomBar: app.globalData.CustomBar,
|
||||
basicsList: [{
|
||||
icon: 'usefullfill',
|
||||
name: '开始'
|
||||
}, {
|
||||
icon: 'radioboxfill',
|
||||
name: '等待'
|
||||
}, {
|
||||
icon: 'roundclosefill',
|
||||
name: '错误'
|
||||
}, {
|
||||
icon: 'roundcheckfill',
|
||||
name: '完成'
|
||||
},],
|
||||
basics: 0,
|
||||
numList: [{
|
||||
name: '开始'
|
||||
}, {
|
||||
name: '等待'
|
||||
}, {
|
||||
name: '错误'
|
||||
}, {
|
||||
name: '完成'
|
||||
},],
|
||||
num: 0,
|
||||
scroll: 0
|
||||
},
|
||||
basicsSteps() {
|
||||
this.setData({
|
||||
basics: this.data.basics == this.data.basicsList.length - 1 ? 0 : this.data.basics + 1
|
||||
})
|
||||
},
|
||||
numSteps() {
|
||||
this.setData({
|
||||
num: this.data.num == this.data.numList.length - 1 ? 0 : this.data.num + 1
|
||||
})
|
||||
},
|
||||
scrollSteps() {
|
||||
this.setData({
|
||||
scroll: this.data.scroll == 9 ? 0 : this.data.scroll + 1
|
||||
})
|
||||
}
|
||||
|
||||
});
|
||||
3
demo/pages/component/steps/steps.json
Normal file
3
demo/pages/component/steps/steps.json
Normal file
@@ -0,0 +1,3 @@
|
||||
{
|
||||
"usingComponents": {}
|
||||
}
|
||||
66
demo/pages/component/steps/steps.wxml
Normal file
66
demo/pages/component/steps/steps.wxml
Normal file
@@ -0,0 +1,66 @@
|
||||
<view class="cu-custom" style="height:{{CustomBar}}px;">
|
||||
<view class="cu-bar fixed gradual-pink" 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="cu-bar solid-bottom">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 基本用法
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap='basicsSteps'>下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class='bg-white padding'>
|
||||
<view class='cu-steps'>
|
||||
<view class='cu-item {{index>basics?"":"text-red"}}' wx:for="{{basicsList}}" wx:key>
|
||||
<text class='icon-{{item.icon}}'></text> {{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='bg-white padding margin-top-xs'>
|
||||
<view class='cu-steps'>
|
||||
<view class='cu-item {{index>basics?"":"text-orange"}}' wx:for="{{basicsList}}" wx:key>
|
||||
<text class='icon-{{index>basics?"title":item.icon}}'></text> {{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class='bg-white padding margin-top-xs'>
|
||||
<view class='cu-steps steps-arrow'>
|
||||
<view class='cu-item {{index>basics?"":"text-blue"}}' wx:for="{{basicsList}}" wx:key>
|
||||
<text class='icon-{{item.icon}}'></text> {{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 数字完成
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap='numSteps'>下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class='bg-white padding'>
|
||||
<view class='cu-steps'>
|
||||
<view class='cu-item {{index>num?"":"text-blue"}}' wx:for="{{numList}}" wx:key>
|
||||
<text class='num {{index==2?"err":""}}' data-index='{{index + 1}}'></text> {{item.name}}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-bar solid-bottom margin-top">
|
||||
<view class='action'>
|
||||
<text class='icon-title text-orange'></text> 多级显示
|
||||
</view>
|
||||
<view class='action'>
|
||||
<button class='cu-btn bg-green shadow' bindtap='scrollSteps'>下一步</button>
|
||||
</view>
|
||||
</view>
|
||||
<scroll-view scroll-x class='bg-white padding response cu-steps steps-bottom' scroll-into-view="scroll-{{scroll}}" scroll-with-animation>
|
||||
<view class='cu-item {{index>scroll?"":"text-blue"}} padding-lr-xl' wx:for="{{10}}" wx:key id="scroll-{{index}}">
|
||||
Level {{index + 1}} <text class='num' data-index='{{index + 1}}'></text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
125
demo/pages/component/steps/steps.wxss
Normal file
125
demo/pages/component/steps/steps.wxss
Normal file
@@ -0,0 +1,125 @@
|
||||
.steps-bottom.cu-steps .cu-item .num::before {
|
||||
content: "\e668";
|
||||
font-family: 'iconfont';
|
||||
}
|
||||
|
||||
.cu-steps {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
scroll-view.cu-steps {
|
||||
display: block;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
scroll-view.cu-steps .cu-item {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item {
|
||||
flex: 1;
|
||||
text-align: center;
|
||||
color: #aaa;
|
||||
position: relative;
|
||||
min-width: 100rpx;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item [class*="icon"], .cu-steps .cu-item .num {
|
||||
display: block;
|
||||
font-size: 40rpx;
|
||||
line-height: 80rpx;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item::before, .cu-steps .cu-item::after,.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {
|
||||
content: "";
|
||||
display: block;
|
||||
position: absolute;
|
||||
height: 0px;
|
||||
width: calc(100% - 80rpx);
|
||||
border-bottom: 1px solid #ccc;
|
||||
left: calc(0px - (100% - 80rpx) / 2);
|
||||
top: 40rpx;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.cu-steps.steps-arrow .cu-item::before, .cu-steps.steps-arrow .cu-item::after {
|
||||
content: "\e6a3";
|
||||
font-family: 'iconfont';
|
||||
height: 30rpx;
|
||||
border-bottom-width: 0px;
|
||||
line-height: 30rpx;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
color: #ccc;
|
||||
}
|
||||
|
||||
.cu-steps.steps-bottom .cu-item::before, .cu-steps.steps-bottom .cu-item::after {
|
||||
bottom: 40rpx;
|
||||
top: initial;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item::after {
|
||||
border-bottom: 1px solid currentColor;
|
||||
width: 0px;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item[class*="text-"]::after {
|
||||
width: calc(100% - 80rpx);
|
||||
color: currentColor !important;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item:first-child::before, .cu-steps .cu-item:first-child::after {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item .num {
|
||||
width: 40rpx;
|
||||
height: 40rpx;
|
||||
border-radius: 50%;
|
||||
line-height: 40rpx;
|
||||
margin: 20rpx auto;
|
||||
font-size: 24rpx;
|
||||
border: 1px solid currentColor;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item[class*="text-"] .num {
|
||||
background-color: currentColor;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item .num::before, .cu-steps .cu-item .num::after {
|
||||
content: attr(data-index);
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
transform: translateY(0rpx);
|
||||
}
|
||||
|
||||
.cu-steps .cu-item[class*="text-"] .num::before {
|
||||
transform: translateY(-40rpx);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item .num::after {
|
||||
transform: translateY(40rpx);
|
||||
color: #fff;
|
||||
transition: all 0.3s ease-in-out 0s;
|
||||
}
|
||||
|
||||
.cu-steps .cu-item[class*="text-"] .num::after {
|
||||
content: "\e645";
|
||||
font-family: 'iconfont';
|
||||
color: #fff;
|
||||
transform: translateY(0rpx);
|
||||
}
|
||||
|
||||
.cu-steps .cu-item[class*="text-"] .num.err::after {
|
||||
content: "\e646";
|
||||
}
|
||||
Reference in New Issue
Block a user