美文网首页
列表渲染

列表渲染

作者: 进击的码农设计师 | 来源:发表于2018-05-22 10:25 被阅读0次

    在小程序的不同生命周期和不同的用户操作情况下,可能需要为用户展示和相应不同的内容,在这个时候,我们可以借助条件渲染来展示内容。

    1、列表渲染:

    1.1 控制单个组件的显示:

    在组件上加入wx:if来控制组件的显示与隐藏。

    • 当wx:if对应的值为true时,对应组件会进行渲染
    • 当wx:if对应的值为false时,对应组件不会进行渲染
    <view wx:if="{{condition}}"> True </view>
    

    2、加入else属性:

    • wx:if:进行条件判断时,使用wx:if来进行初始的条件判断,可以单独出现
    • wx:elif:如果项目不止两个判断结果,使用wx:elif来辅助进行结果的输出
    • wx:else:如果需要进行多种条件判断结果,使用wx:else来辅助进行结果的输出
    <view wx:if="{{length > 5}}"> 1 </view>
    <view wx:elif="{{length > 2}}"> 2 </view>
    <view wx:else> 3 </view>
    

    3、多个组件的显示控制:

    使用辅助标签<block>对多个组件进行显示控制。

    4、wx:ifhidden的区别:

    • wx:if:根据值来判断组件是否需要渲染进入界面。
    • hidden:始终会进行渲染,但是会根据其值决定是否在界面中显示。
    • 如果组件的显示切换频繁,就使用hidden,反之则使用wx:if

    相关文章

      网友评论

          本文标题:列表渲染

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