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>