steps 升级

dist/steps/index.wxml

@@ -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>

dist/steps/wxss/step.wxss

@@ -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;
+  top: 30px;
-  left: -8px;
+  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;
+}

dist/steps/wxss/vstep.wxss

@@ -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;

example/steps/index.js

@@ -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,
+        done: false,
-        current: true,
+        current: false,
-        text: '步骤二'
+        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() {
   },
-})
+});

example/steps/index.wxml

@@ -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>