微信小程序——包装元素block

以components中创建的BlockComp 和pages中的features为例

features.json

{
    "usingComponents": {
        "if-comp":"/components/IfComp/IfComp",
        "for-comp":"/components/ForComp/ForComp",
        "block-comp":"/components/BlockComp/BlockComp"
    },
    "navigationBarTitleText": "语法特点",
    "navigationBarBackgroundColor": "#FFF",
    "navigationBarTextStyle": "black"
}

features.wxml

<view>===========条件渲染=============</view>
<if-comp />
<view>===========循环遍历=============</view>
<for-comp />
<view>===========空标签=============</view>
<block-comp></block-comp>

BlockComp.wxml

<block wx:for="{
   
   {list}}" wx:key="*this">
    <!-- {
   
   {index}}-{
   
   {item}} -->
    <view>{
   
   {index}}-{
   
   {item}}</view>
</block>

<view>
    <block wx:if="{
   
   {count >= 10}}">两位数：{
   
   {count}}</block>
    <block wx:elif="{
   
   {count >= 5 && count <10}}">个位数(5-9)：{
   
   {count}}</block>
    <block wx:else>个位数(0-5)：{
   
   {count}}</block>
</view>
<text class="btn" bindtap="rand">随机数2</text>

BlockComp.wxss

.btn{
    border: 1px solid #000;
    background: #fafafa;
    padding: 2px 6px;
}

BlockComp.js

Component({
    data:{
        list:["a","b","c"],
        count:0
    },
    methods:{
        rand(){
            this.setData({
                count:Math.floor(Math.random()*15)
            })
        }
    }
})

block 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

以上面for循环遍历为例，使用view时，查看调试器中的Wxml如下图所示

当使用block时，如下图所示

所以，个人感觉使用block可以在控制台更简洁直观看到运行结果。比起view这些组件，block更注重实现if判断、for循环遍历这一类方法，而不是强调组件名称。

运行效果