feat:steps组件新增reverse属性

Author: 张寸起

dist/step/index.wxml

@@ -24,9 +24,9 @@
       <slot name="describe"/>
     </view>
   </view>
-  <view class="step-line l-line-class {{'step-line-'+ direction}} {{activeIndex>index?'step-line-finish':'step-line-wait'}}"
+  <view class="step-line l-line-class {{'step-line-'+ direction}} {{currentStatus.isReverse(reverse,activeIndex,index)?'step-line-finish':'step-line-wait'}}"
         style="{{activeIndex>index?('background-color:'+color):''}}" 
-        wx:if="{{length !== index+1}}">
+        wx:if="{{reverse?(index!==0):(length!==index+1)}}">
   </view>
 </view>
 
@@ -59,9 +59,17 @@ var dotStyle = function(activeIndex,index,color){
   }
 }
 
+var isReverse = function(reverse,activeIndex,index) {
+  if(reverse){
+    return (activeIndex>=index)
+  }
+  return (activeIndex>index)
+}
+
 module.exports = {
   setStatus:setStatus,
   statusStyle:statusStyle,
-  dotStyle:dotStyle
+  dotStyle:dotStyle,
+  isReverse:isReverse
 }
 </wxs>

dist/steps/index.js

@@ -35,7 +35,8 @@ Component({
       type: String,
       value: 'process'
     },
-    dot: Boolean
+    dot: Boolean,
+    reverse: Boolean
   },
 
   observers: {

dist/steps/index.wxml

@@ -1,3 +1,3 @@
-<view class="l-class steps-container {{'steps-container-'+direction}}">
+<view class="l-class steps-container {{reverse?'steps-container-'+direction+'-reverse':'steps-container-'+direction}}">
     <slot />
 </view>

dist/steps/index.wxss

@@ -1 +1 @@
-.steps-container{display:flex;width:100%}.steps-container-row{flex-direction:row}.steps-container-column{flex-direction:column}
+.steps-container{display:flex;width:100%}.steps-container-row{flex-direction:row}.steps-container-row-reverse{flex-direction:row-reverse}.steps-container-column{flex-direction:column}.steps-container-column-reverse{flex-direction:column-reverse}

examples/dist/step/index.wxml

@@ -24,9 +24,9 @@
       <slot name="describe"/>
     </view>
   </view>
-  <view class="step-line l-line-class {{'step-line-'+ direction}} {{activeIndex>index?'step-line-finish':'step-line-wait'}}"
+  <view class="step-line l-line-class {{'step-line-'+ direction}} {{currentStatus.isReverse(reverse,activeIndex,index)?'step-line-finish':'step-line-wait'}}"
         style="{{activeIndex>index?('background-color:'+color):''}}" 
-        wx:if="{{length !== index+1}}">
+        wx:if="{{reverse?(index!==0):(length!==index+1)}}">
   </view>
 </view>
 
@@ -59,9 +59,17 @@ var dotStyle = function(activeIndex,index,color){
   }
 }
 
+var isReverse = function(reverse,activeIndex,index) {
+  if(reverse){
+    return (activeIndex>=index)
+  }
+  return (activeIndex>index)
+}
+
 module.exports = {
   setStatus:setStatus,
   statusStyle:statusStyle,
-  dotStyle:dotStyle
+  dotStyle:dotStyle,
+  isReverse:isReverse
 }
 </wxs>

examples/dist/steps/index.js

@@ -35,7 +35,8 @@ Component({
       type: String,
       value: 'process'
     },
-    dot: Boolean
+    dot: Boolean,
+    reverse: Boolean
   },
 
   observers: {

examples/dist/steps/index.wxml

@@ -1,3 +1,3 @@
-<view class="l-class steps-container {{'steps-container-'+direction}}">
+<view class="l-class steps-container {{reverse?'steps-container-'+direction+'-reverse':'steps-container-'+direction}}">
     <slot />
 </view>

examples/dist/steps/index.wxss

@@ -1 +1 @@
-.steps-container{display:flex;width:100%}.steps-container-row{flex-direction:row}.steps-container-column{flex-direction:column}
+.steps-container{display:flex;width:100%}.steps-container-row{flex-direction:row}.steps-container-row-reverse{flex-direction:row-reverse}.steps-container-column{flex-direction:column}.steps-container-column-reverse{flex-direction:column-reverse}

examples/pages/components/view/pages/steps/index.wxml

@@ -27,6 +27,14 @@
     </l-steps>
   </content-card>
 
+  <content-card name="步骤条顺序" cardPadding="{{false}}">
+    <l-steps direction="column" reverse active-index="1">
+      <l-step title="已支付" describe="11:30" />
+      <l-step title="备餐中" describe="12:30" />
+      <l-step title="配送中" describe="13:30" />
+    </l-steps>
+  </content-card>
+
   <content-card name="设置步骤条元素图标" cardPadding="{{false}}">
     <l-steps dot direction="column" active-index="1">
       <l-step icon="cart" title="已支付" describe="11:30" />

src/step/index.wxml

@@ -24,9 +24,9 @@
       <slot name="describe"/>
     </view>
   </view>
-  <view class="step-line l-line-class {{'step-line-'+ direction}} {{activeIndex>index?'step-line-finish':'step-line-wait'}}"
+  <view class="step-line l-line-class {{'step-line-'+ direction}} {{currentStatus.isReverse(reverse,activeIndex,index)?'step-line-finish':'step-line-wait'}}"
         style="{{activeIndex>index?('background-color:'+color):''}}" 
-        wx:if="{{length !== index+1}}">
+        wx:if="{{reverse?(index!==0):(length!==index+1)}}">
   </view>
 </view>
 
@@ -59,9 +59,17 @@ var dotStyle = function(activeIndex,index,color){
   }
 }
 
+var isReverse = function(reverse,activeIndex,index) {
+  if(reverse){
+    return (activeIndex>=index)
+  }
+  return (activeIndex>index)
+}
+
 module.exports = {
   setStatus:setStatus,
   statusStyle:statusStyle,
-  dotStyle:dotStyle
+  dotStyle:dotStyle,
+  isReverse:isReverse
 }
 </wxs>