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

痛定思痛。 2021-07-24 22:35 503阅读 0赞

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>