tyjs_wxapp/component/iView/step/index.wxml

<view class="i-class i-step-item {{parse.getClass(status,current,index)}} {{ direction === 'vertical' ? 'i-step-vertical' : 'i-step-horizontal' }}" style="{{parse.getItemStyle(len,direction)}}">
    <view class="i-step-item-ico">
        <view class="i-step-ico" wx:if="{{parse.noIco(status,current,index,icon)  }}">{{ index+1 }}</view>
        <view class="i-step-ico" wx:else>
            <i-icon i-class="i-step-ico-in" type="{{parse.getIcoClass(status,icon)}}"></i-icon>
        </view>
        <view class="i-step-line" wx:if="{{ index !== len - 1 }}"></view>
    </view>
    <view class="i-step-item-main">
        <view class="i-step-item-title" wx:if="{{title !== ''}}">
            {{title}}
        </view>
        <view class="i-step-item-title" wx:else>
            <slot name="title"></slot>
        </view>
        <view class="i-step-item-content" wx:if="{{content !== ''}}">
            {{content}}
        </view>
        <view class="i-step-item-content" wx:else>
            <slot name="content"></slot>
        </view>
    </view>
</view>
<wxs module="parse"> 
var allStatus = ['wait','process','finish','error'];
module.exports = {
    noIco : function( status,current,index,icon ){
        var aindex = allStatus.indexOf(status);
        var noIcon = true;
        if( index < current || icon !== '' ){
            noIcon = false;
        }
        return noIcon;
    },
    getIcoClass : function( status,ico ){
        var class = '';
        if( status === 'error' ){
            class = 'close';
        }else{
            class = 'right';
        }
        if( ico !== '' ){
            class = ico;
        }
        return class;
    },
    getItemStyle : function(len,direction){
        if( direction === 'horizontal' ){
            return 'width :'+100/len + '%';
        }else{
            return 'width : 100%;';
        }
    },
    getClass : function( status,current,index ) {
        //wait、process、finish、error
        var startClass = 'i-step-'
        var classes = '';
        var cindex = allStatus.indexOf( status );
        if( cindex !== -1 ){
            classes = startClass + allStatus[cindex];
        }
        if( index < current ){
            classes = startClass + 'finish';
        }else if( index === current ){
            classes = startClass + 'process';
        }
        return classes;
    }
}
</wxs>