【小程序】block标签的介绍和使用

转自：https://blog.csdn.net/qq_36530458/article/details/79778373

1. <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
2. 因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

        < block  wx:if = "{{true}}" >

              < view >  view1  </ view >

             < view >  view2  </ view >

        </ block >

3. 类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。例如：

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

     < view >  {{index}}:  </ view >

      < view >  {{item}}  </ view >

</block>

在安卓中我们经常会使用ListView/GridView/RecyclerView来实现展示循环数据。那么小程序中怎么到呢。其实很简单，使用block就可以了。

下面我们先看下效果图：

这个布局其实很简单，大致分为3部分，上+下(左75%，右25%)。这里就不在细说了。那么这里要怎么写wxml呢。下面贴代码：

这边很清晰的可以看出<block></block>这对标签，而数据源便是wx:for="{{goodlist}}"中的goodlist了。接着往下走，我们可以看到点击标签的时候有bindtap事件，这里就不做说明了。我们重点看下{{item.StartCity}},这是什么意思呢，其实这就是获取数据源中的数据，而item代表的是goodlist中的一条数据，StrrtCity等都是数据源中的一些具体属性。你可以更据需要直接调头你想要的字段名就可以了。block到此基本结束了。最后此处设置了一个view，用来代替当数据源为空时显示无数据页面提示。