- block无论什么情况都不会渲染到页面上,因此它不是一个组件。它只会用于处理逻辑(
配合wx:if、wx:elif、wx:else、wx:for的使用
)。
- 使用场景:如果项目中多个组件是同样的逻辑,那么多个组件最好被block包裹,这样代码的可读性也很高。并且block也可以嵌套block。
如下代码包含了多个组件是相同的逻辑、以及block之间的嵌套的情况。
具体代码如下所示
例如如下这种情况(实际项目比这更复杂,这里做了些修改和简化)
<block wx:if="{{orderType == '3'}}">
<block wx:if="{{orderStatus == 0}}">
<view class="flowTitle">
<view>报名</view>
<view>面试</view>
<view>录用</view>
<view class="twoStep">
<view class="iconfont icon-xuanzhong"></view>
<view class="secondLine"></view>
</view>
</view>
</block>
<block wx:elif="{{orderStatus == 2}}">
<view class="threeStep active">
<view class="iconfont icon-xuanzhong"></view>
<view class="thirdLine"></view>
</view>
</block>
<block wx:elif="{{orderStatus == 3}}">
<view class="flowTitle">
<view>报名</view>
<view>录用</view>
<view>支付</view>
<view>评价</view>
</view>
</block>
<block wx:elif="{{orderStatus == 4 || orderStatus == 5 || orderStatus == 6 || orderStatus == 7}}">
<view class="flowTitle">
<view>报名</view>
<view>结束</view>
</view>
</block>
<block wx:else>
<view class="flowTitle">
<view>报名</view>
<view>评价</view>
</view>
<view class="fourStep" style="width:30px;">
<view class="iconfont icon-xuanzhong"></view>
</view>
</block>
</block>
<block wx:else>
<block wx:if="{{orderStatus == 0 || orderStatus == 2 || orderStatus == 3}}">
<view class="flowTitle">
<view>报名</view>
<view>录用</view>
<view class="oneStep active">
<view class="iconfont icon-xuanzhong"></view>
<view class="firstLine"></view>
</view>
</view>
</block>
<block wx:elif="{{orderStatus == 4 || orderStatus == 5 || orderStatus == 6 || orderStatus == 7}}">
<view class="flowTitle">
<view>报名</view>
<view>评价</view>
</view>
</block>
<block wx:else>
<view class="flowTitle">
<view>报名</view>
<view>结束</view>
</view>
<view class="fourStep" style="width:30px;">
<view class="iconfont icon-xuanzhong"></view>
</view>
</block>
</block>