微信小程序列表渲染、条件渲染-蒲公英云

微信小程序列表渲染、条件渲染

block:不会在页面加载该标签,只是一个容器,只接收控制属性(wx:if、wx:for、wx:else),来控制其中的元素
block/view标签作为容器
列表渲染:
    wx:for="{
   {只接收数组}}"
    wx:for-item='变量名'    存放每次遍历数组中的元素;可省略,默认为item.调用
    wx:for-index='变量名'   存放遍历数组元素的下标;可省略,默认为index
    wx:key="key"             遍历的当前元素是一个唯一的字符串或者数字
        wx:key="unique"        可直接写遍历的当前元素的属性名,而不用item.属性名
        wx:key="*this"        当遍历的当前元素是一个唯一的字符串或者数字
    语法:
        <block wx:for="{
   {arr}}"  wx:for-item='item'  wx:for-index='index' >
                <标签>{
   {item}}</标签>
        </block>
    数组中有多少元素就会创造多少个标签
条件渲染:
    <view wx:if="{
   {view == 'WEBVIEW'}}"> WEBVIEW </view>
    <view wx:elif="{
   {view == 'APP'}}"> APP </view>
    <view wx:else="{
   {view == 'MINA'}}"> MINA </view>

代码示例:

//会根据数组中的内容,创建相同形式不同内容的组件
<block wx:for="{ {newsData}}" wx:for-item="item" wx:for-index="index" wx:key="key">
  <view class='article'>
    <view class='content'>
      <image class='author_img' src='{ {item.authorIcon}}'></image>
      <text class='author'>{ { item.authorName}}</text>
      <text class='date'>{ { item.authorDate}}</text>
    </view>
  </view>
  <text class='title'>{ { item.title}}</text>
  <image class='content_img' src='{ {item.articleImg}}'></image>
  <text class='text'>{ { item.articleText}}</text>
  <view class='like'>
    <image class='zan_img' src='{ {item.dzImg}}'></image>
    <text class='zan'>{ { item.articleLikeComment}}</text> 
    <image class='fx_img' src='{ {item.fxImg}}'></image>
     <text class='fx'>{ { item.articleLikeSc}}</text> 
  </view>
</block>