mirror of
https://gitee.com/vant-contrib/vant-weapp.git
synced 2025-04-06 03:58:05 +08:00
steps 升级
This commit is contained in:
pangxie1991
parent
79e8d41ae1
commit
f608ac68ae
3
dist/steps/index.wxml
vendored
3
dist/steps/index.wxml
vendored
@ -2,9 +2,10 @@
|
||||
<view class="zui-steps zui-steps--{{ type == 'vertical' ? 'vsteps' : 'steps' }} zui-steps--{{ steps.length }} {{ className }}">
|
||||
<view
|
||||
wx:for="{{ steps }}" wx:for-item="step" wx:key="unique" wx:for-index="index"
|
||||
class="zui-steps__step {{ index == 0 ? 'zui-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zui-steps__step--last-child' : '' }} {{ step.done ? 'zui-steps__step--done' : '' }} {{ step.current ? 'zui-steps__step--cur' : '' }}"
|
||||
class="zui-steps__step {{ hasDesc ? 'zui-steps__step--db-title' : '' }} {{ index == 0 ? 'zui-steps__step--first-child' : '' }} {{ index == steps.length - 1 ? 'zui-steps__step--last-child' : '' }} {{ step.done ? 'zui-steps__step--done' : '' }} {{ step.current ? 'zui-steps__step--cur' : '' }}"
|
||||
>
|
||||
<view class="zui-steps__title">{{ step.text }}</view>
|
||||
<view wx:if="{{ hasDesc && step.desc }}" class="zui-steps__title zui-steps__title--desc">{{ step.desc }}</view>
|
||||
<view class="zui-steps__icons">
|
||||
<view class="zui-steps__circle"></view>
|
||||
</view>
|
||||
|
||||
37
dist/steps/wxss/step.wxss
vendored
37
dist/steps/wxss/step.wxss
vendored
@ -13,21 +13,20 @@
|
||||
.zui-steps--steps .zui-steps__step {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding-bottom: 20px;
|
||||
padding-bottom: 25px;
|
||||
color: #b1b1b1;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__title {
|
||||
display: inline-block;
|
||||
transform: translateX(-50%);
|
||||
margin-left: 2px;
|
||||
font-size: 10px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__icons {
|
||||
position: absolute;
|
||||
top: 28px;
|
||||
left: -8px;
|
||||
top: 30px;
|
||||
left: -10px;
|
||||
padding: 0 8px;
|
||||
background-color: #fff;
|
||||
z-index: 10;
|
||||
@ -45,7 +44,7 @@
|
||||
.zui-steps--steps .zui-steps__line {
|
||||
position: absolute;
|
||||
left: 0px;
|
||||
top: 30px;
|
||||
top: 32px;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #e5e5e5;
|
||||
@ -69,7 +68,8 @@
|
||||
|
||||
/* 正在进行中的steps */
|
||||
.zui-steps--steps .zui-steps__step--cur .zui-steps__icons {
|
||||
top: 24px;
|
||||
top: 25px;
|
||||
left: -14px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--cur .zui-steps__circle {
|
||||
@ -79,10 +79,6 @@
|
||||
background-size: 13px 13px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--cur .zui-steps__title {
|
||||
margin-left: 6px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--cur .zui-steps__line {
|
||||
background-color: #e5e5e5;
|
||||
}
|
||||
@ -91,6 +87,11 @@
|
||||
.zui-steps--steps .zui-steps__step--first-child .zui-steps__title {
|
||||
margin-left: 0;
|
||||
transform: none;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--first-child .zui-steps__icons {
|
||||
left: -7px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--last-child {
|
||||
@ -103,6 +104,7 @@
|
||||
|
||||
.zui-steps--steps .zui-steps__step--last-child .zui-steps__title {
|
||||
transform: none;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--last-child .zui-steps__icons {
|
||||
@ -113,3 +115,16 @@
|
||||
.zui-steps--steps .zui-steps__step--last-child .zui-steps__line {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* 有描述的step */
|
||||
.zui-steps--steps .zui-steps__step--db-title .zui-steps__line {
|
||||
top: 46px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--db-title .zui-steps__icons {
|
||||
top: 44px;
|
||||
}
|
||||
|
||||
.zui-steps--steps .zui-steps__step--db-title.zui-steps__step--cur .zui-steps__icons {
|
||||
top: 40px;
|
||||
}
|
||||
|
||||
5
dist/steps/wxss/vstep.wxss
vendored
5
dist/steps/wxss/vstep.wxss
vendored
@ -22,10 +22,15 @@
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__title {
|
||||
display: inline-block;
|
||||
line-height: 20px;
|
||||
padding-left: 27px;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__title--desc {
|
||||
padding-left: 3px;
|
||||
}
|
||||
|
||||
.zui-steps--vsteps .zui-steps__icons {
|
||||
position: absolute;
|
||||
left: 7px;
|
||||
|
||||
@ -1,30 +1,72 @@
|
||||
var app = getApp()
|
||||
// var app = getApp();
|
||||
|
||||
Page({
|
||||
data: {
|
||||
steps: [
|
||||
{
|
||||
current: false,
|
||||
current: true,
|
||||
done: true,
|
||||
text: '步骤一'
|
||||
text: '步骤一',
|
||||
desc: '10.01'
|
||||
},
|
||||
{
|
||||
done: true,
|
||||
current: true,
|
||||
text: '步骤二'
|
||||
done: false,
|
||||
current: false,
|
||||
text: '步骤二',
|
||||
desc: '10.02'
|
||||
},
|
||||
{
|
||||
done: false,
|
||||
current: false,
|
||||
text: '步骤三'
|
||||
}
|
||||
],
|
||||
steps2: [
|
||||
{
|
||||
current: false,
|
||||
done: true,
|
||||
text: '步骤一',
|
||||
desc: '10.01'
|
||||
},
|
||||
{
|
||||
done: true,
|
||||
current: true,
|
||||
text: '步骤二',
|
||||
desc: '10.02'
|
||||
},
|
||||
{
|
||||
done: false,
|
||||
current: false,
|
||||
text: '步骤三',
|
||||
desc: '10.03'
|
||||
}
|
||||
],
|
||||
steps3: [
|
||||
{
|
||||
current: false,
|
||||
done: true,
|
||||
text: '步骤一',
|
||||
desc: '10.01'
|
||||
},
|
||||
{
|
||||
done: true,
|
||||
current: false,
|
||||
text: '步骤二',
|
||||
desc: '10.02'
|
||||
},
|
||||
{
|
||||
done: true,
|
||||
current: true,
|
||||
text: '步骤三',
|
||||
desc: '10.03'
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
onLoad: function () {
|
||||
onLoad() {
|
||||
|
||||
},
|
||||
|
||||
onShow: function() {
|
||||
onShow() {
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
@ -4,7 +4,51 @@
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', steps }}"></template>
|
||||
<template is="zui-steps" data="{{ type: 'horizon', steps: steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', steps: steps2 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', steps: steps3 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">有描述的steps</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps2 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-cell zui-cell--last-child">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'horizon', hasDesc: true, steps: steps3 }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="zui-panel">
|
||||
<view class="zui-cell zui-cell">
|
||||
<view class="zui-cell__bd">
|
||||
<template is="zui-steps" data="{{ type: 'vertical', hasDesc: true, steps }}"></template>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user