微信小程序 block的使用场景

  • 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>
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容