美文网首页
微信小程序之block

微信小程序之block

作者: 奶酪凌 | 来源:发表于2018-06-20 09:45 被阅读0次

    1 .列表渲染

    block wx:for --渲染一个包含多节点的结构块

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

    2.条件渲染

    如果要一次性判断多个组件标签,可以使用一个 <block/> 标签将多个组件包装起来,并在上边使用 wx:if 控制属性。

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

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

    案例

    1.使用swiper组件,图片滑动切换中使用block

    <swiper indicator-dots="{{indicatorDots}}"  autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
      <block wx:for="{{imgUrls}}">
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="355" height="150"/>
        </swiper-item>
      </block>
    </swiper>
    

    2.无限循环中列表循环,用block包裹循环体(wx:for)


    block--wxml.png
    block--js.png

    3.点击按钮获取微信头像和昵称(wx:if)


    block-wxml.png
    block-js.png

    相关文章

      网友评论

          本文标题:微信小程序之block

          本文链接:https://www.haomeiwen.com/subject/avlblftx.html