【微信小程序】block 与 view 有何区别

block 与 view 有何区别？

参考链接：
https://www.cnblogs.com/depend-wind/articles/10399495.html

用在block中可以渲染一个包含多节点的结构块。比如：

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

输出

0:
1
1:
2
2:
3

用在view中只能应用单个节点。比如：

<view wx:for="{{[1, 2, 3]}}" wx:for-index="idx" wx:for-item="itemName">
  {{idx}}: {{itemName}}
</view>

输出

0：1
1：2
2：3

再如：

<view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="i">
  <view wx:for="{{[1, 2, 3, 4, 5, 6, 7, 8, 9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

输出

1 * 1 = 1
1 * 2 = 2
...
8 * 9 = 72
9 * 9 = 81

如果将 block 改为 view，会有什么现象呢

<!-- <block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block> -->
<view wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</view>

在视觉显示效果上有区别：

两者的区别是， 是一个组件，会在页面上做渲染；不是一个组件，它仅仅是一个包装元素，只接受控制属性，不会在页面中做任何渲染。

由于 view 是组件，所以页面显示时会因此占据一定空间。而 block 不会被渲染，因此无任何样式效果。

<!-- 代码 1 -->
<view class="test" wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</view>
<!-- 代码 2 -->
<block class="test" wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

上述的两个代码块均通过类名被 css 修改

.test {
  margin-top: 100rpx;
}

对 block 无效果。

而 view 的三次循环生成的结果，均产生了 margin-top 的效果。因此，view 不仅会被渲染，而且每次循环都会渲染一次，由此作用到页面中。如果需要借助循环完成此效果，则考虑用 view 进行多节点循环。但是，通过循环产生样式而非通过 css 控制，窃以为这种方式不太好。

下面是使用的例子：

wx:if

<block wx:if="{{true}}">
    <view> text </view>
    <view> text </view>
</block>

wx:for

<block wx:for="{{[1, 2, 3]}}">
    <view> {{index}}: </view>
    <view> {{item}} </view>
</block>

wx:elif 和 wx:else

<block wx:if="{{boolean==true}}">
    <view class="bg_black"></view>
</block>
<block wx:elif="{{boolean==false}}">
    <view class="bg_red"></view>
</block>
<block wx:else>
    <view class="bg_red"></view>
</block>