1. 程式人生 > 實用技巧 >小程式開發-block元件的使用

小程式開發-block元件的使用

微信小程式中,block不是一個元件,而是一個包裝元素,不會在頁面中做任何渲染。

使用情況:條件渲染 wx:if

因為 wx:if 是一個控制屬性,需要將它新增到一個標籤/元件上,用於控制隱藏與顯示。而如果需要一次性控制多個元件的隱藏與顯示,一個一個新增wx:if過於繁瑣,此時就可以使用block將這些元件包裹起來,對block設定wx:if控制屬性

<block wx:if="">
      <view catchtap="minus" data-category="{{value.id}}" data-productid="{{item.id}}" class="minus">-</view>
      <view class="number">{{item.num}}</view>
</block>

wx:if 條件判斷的值, 對0和空字串轉為false,此時block包裹的元件隱藏
如果想讓其顯示將其改成非0數字、非空字串即可。

使用情況:迴圈渲染 wx:for

<block wx:for="{{ history_today_data }}" wx:key="a">
      <view class="title">
      <text class="year">{{item.year}}</text>
            <text class="mid"> | </text>
            <text class="titl" selectable="true" bindlongtap="copyToClipboard">{{item.title}}</text>
      </view>
      <view class="des">
            <text bindlongtap="copyToClipboard" data-des="{{item.des}}">{{item.des}}</text>
      </view>
</block>

差不多就是這樣用啦~~