仿互站小程序

vant/steps/index.js

@@ -0,0 +1,17 @@
+var o = require("../common/component"), r = require("../common/color");
+
+(0, o.VantComponent)({
+    props: {
+        icon: String,
+        steps: Array,
+        active: Number,
+        direction: {
+            type: String,
+            value: "horizontal"
+        },
+        activeColor: {
+            type: String,
+            value: r.GREEN
+        }
+    }
+});

vant/steps/index.json

@@ -0,0 +1,13 @@
+{
+    "component": true,
+    "usingComponents": {
+        "van-icon": "../icon/index",
+        "forview": "/utils/forview/index",
+        "van-loading": "/vant/loading/index",
+        "van-dialog": "/vant/dialog/index",
+        "van-button": "/vant/button/index",
+        "van-popup": "/vant/popup/index",
+        "van-tab": "/vant/tab/index",
+        "van-tabs": "/vant/tabs/index"
+    }
+}

vant/steps/index.wxml

@@ -0,0 +1,27 @@
+<view class="custom-class {{utils.bem( 'steps',[direction] )}}">
+    <view class="van-step__wrapper">
+        <view class="{{utils.bem( 'step',[ direction,status(index,active) ] )}} van-hairline" wx:for="{{steps}}" wx:key="index">
+            <view class="van-step__title" style="{{index===active?'color: '+activeColor:''}}">
+                <view>{{item.text}}</view>
+                <view>{{item.desc}}</view>
+            </view>
+            <view class="van-step__circle-container">
+                <view class="van-step__circle" style="{{index<active?'background-color: '+activeColor:''}}" wx:if="{{index!==active}}"></view>
+                <van-icon color="{{activeColor}}" customClass="van-step__active" name="checked" wx:else></van-icon>
+            </view>
+            <view class="van-step__line" style="{{index<active?'background-color: '+activeColor:''}}" wx:if="{{index!==steps.length-1}}"></view>
+        </view>
+    </view>
+</view>
+<wxs module="utils" src="../wxs/utils.wxs" />
+<wxs module="status">
+function get(index, active) {
+    if (index < active) {
+        return ('finish')
+    } else if (index === active) {
+        return ('process')
+    };
+    return ('')
+};
+module.exports = get;
+</wxs>

vant/steps/index.wxss

@@ -0,0 +1,153 @@
+@import "../area/index.wxss";
+
+.van-steps {
+    overflow: hidden;
+    background-color: #fff;
+}
+
+.van-steps--horizontal {
+    padding: 10px;
+}
+
+.van-steps--horizontal .van-step__wrapper {
+    position: relative;
+    display: flex;
+    overflow: hidden;
+}
+
+.van-steps--vertical {
+    padding-left: 10px;
+}
+
+.van-steps--vertical .van-step__wrapper {
+    padding: 0 0 0 20px;
+}
+
+.van-step {
+    position: relative;
+    flex: 1;
+    font-size: 14px;
+    color: #999;
+}
+
+.van-step--finish {
+    color: #333;
+}
+
+.van-step__circle {
+    width: 5px;
+    height: 5px;
+    background-color: #999;
+    border-radius: 50%;
+}
+
+.van-step--horizontal {
+    padding-bottom: 14px;
+}
+
+.van-step--horizontal:first-child .van-step__title {
+    transform: none;
+}
+
+.van-step--horizontal:first-child .van-step__circle-container {
+    padding: 0 8px 0 0;
+    transform: translate3d(0,50%,0);
+}
+
+.van-step--horizontal:last-child {
+    position: absolute;
+    right: 0;
+    width: auto;
+}
+
+.van-step--horizontal:last-child .van-step__title {
+    text-align: right;
+    transform: none;
+}
+
+.van-step--horizontal:last-child .van-step__circle-container {
+    right: 0;
+    padding: 0 0 0 8px;
+    transform: translate3d(0,50%,0);
+}
+
+.van-step--horizontal .van-step__circle-container {
+    position: absolute;
+    bottom: 6px;
+    z-index: 1;
+    padding: 0 8px;
+    background-color: #fff;
+    transform: translate3d(-50%,50%,0);
+}
+
+.van-step--horizontal .van-step__title {
+    display: inline-block;
+    font-size: 12px;
+    transform: translate3d(-50%,0,0);
+}
+
+.van-step--horizontal .van-step__line {
+    position: absolute;
+    right: 0;
+    bottom: 6px;
+    left: 0;
+    height: 1px;
+    background-color: #eee;
+    transform: translate3d(0,50%,0);
+}
+
+.van-step--horizontal.van-step--process {
+    color: #333;
+}
+
+.van-step--horizontal.van-step--process .van-step__active {
+    display: block;
+    font-size: 12px;
+    line-height: 1;
+}
+
+.van-step--vertical {
+    padding: 10px 10px 10px 0;
+    font-size: 14px;
+    line-height: 18px;
+}
+
+.van-step--vertical:after {
+    border-bottom-width: 1px;
+}
+
+.van-step--vertical:last-child:after {
+    border-bottom-width: none;
+}
+
+.van-step--vertical:first-child:before {
+    position: absolute;
+    top: 0;
+    left: -15px;
+    z-index: 1;
+    width: 1px;
+    height: 20px;
+    background-color: #fff;
+    content: "";
+}
+
+.van-step--vertical .van-step__active,.van-step--vertical .van-step__circle,.van-step--vertical .van-step__line {
+    position: absolute;
+    top: 19px;
+    left: -14px;
+    z-index: 2;
+    transform: translate3d(-50%,-50%,0);
+}
+
+.van-step--vertical .van-step__active {
+    font-size: 12px;
+    line-height: 1;
+}
+
+.van-step--vertical .van-step__line {
+    z-index: 1;
+    width: 1px;
+    height: 100%;
+    background-color: #eee;
+    transform: translate3d(-50%,0,0);
+}