列表渲染与条件渲染

摘要： 如何渲染数组类型和对象类型的数据渲染数组的所有数据相同的结构是列表渲染的前提，列表等都会有⼏千上万条的数据，它们的共同的特征就是数据的结构相同。data: { ...

如何渲染数组类型和对象类型的数据

渲染数组的所有数据

相同的结构是列表渲染的前提，列表等都会有⼏千上万条的数据，它们的共同的特征就是数据的结构相同。

data: {    
        newstitle:[      "幸咖啡",  "腾：年",      "总投资20亿元",      "京数量同⽐增⻓163%",      "腾超五千万",
    ],
  }

如何把整个列表都渲染出来呢？

<view wx:for="{{newstitle}}" wx:key="*this">
  {{item}} </view>

wx:for=”{{newstitle}}”，就是在数组newstitle二进二循环

*this代表在 for 循环中的 item 本身，{{item}}的item是默认的

<view wx:for-items="{{newstitle}}" wx:for-item="title" wx:key="*this">
  {{title}} </view>

默认数组的当前项的下标变量名默认为 index

数组当前项的变量名默认为 item，wx:for-item 可以指定数组当前元素的变量名，wx:for-index 可以指定数组当 前下标的变量名

电影列表

    movies: [{     name: "肖申克的救赎",      img:"httpsublic/p480bp",      desc:"有的⼈的⽻翼是如此光辉，即使世界上最⿊暗的牢狱，也⽆法⻓久地将他围困！"},
      {        name: "霸王别姬",        img: "https://ic/pwebp",        desc: "⻛华绝代。"
      },
      {        name: "⾟德勒名单",         img: "https:/",        desc: "拯救⼀个⼈，就是拯救整个世界。"
      },    
    ],

<view class="page__bd">
    <view class="weui-panel weui-panel_access">
        <view class="weui-panel__bd" wx:for="{{movies}}" wx:for-item="movi
es" wx:key="*item">
            <navigator url="" class="weui-media-box weui-media-box_appmsg"hover-class="weui-cell_active">
                <view class="weui-media-box__hd weui-media-box__hd_in-appm
sg">
                    <image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}" sytle="height:auto"></image>
                </view>
                <view class="weui-media-box__bd weui-media-box__bd_in-appm
sg">
                    <view class="weui-media-box__title">{{movies.name}}</view>
                    <view class="weui-media-box__desc">{{movies.desc}}</view>
                </view>
            </navigator>
        </view>
    </view></view>

图⽚样式

图中的模式mode，图⽚的模式默认为scaleToFill，也就 是不保持纵横向缩放图片，使图片的宽度完全拉伸至填满 image 元素

希望图片保持宽度不变，长度自动变化，保持原图宽高不变

调到widthFix 的模式

<image class="weui-media-box__thumb" mode="widthFix" src="{{movies.img}}"

.weui-media-box__hd_in-appmsg{  height: auto; 
}

Grid九宫格样式

<view class="page__bd">
    <view class="weui-grids">
        <block wx:for="{{grids}}" wx:for-item="grid" wx:key="*this">
            <navigator url="" class="weui-grid" hover-class="weui-grid_act
ive">
                <image class="weui-grid__icon" src="{{grid.imgurl}}" />
                <view class="weui-grid__label">{{grid.title}}</view>
            </navigator>
        </block>
    </view></view>

grids:[
      { imgurl:"https:",        title:"2"
      },
      {        imgurl: "https:",        title: "1"
      },
    ]

List样式

<view class="weui-cells weui-cells_after-title">
    <block wx:for="{{listicons}}" wx:for-item="listicons">
        <navigator url="" class="weui-cell weui-cell_access" hover-class="weui-cell_active">
            <view class="weui-cell__hd">
                <image src="{{listicons.icon}}" style="margin-right: 5px;v
ertical-align: middle;width:20px; height: 20px;"></image>
            </view>
            <view class="weui-cell__bd">{{listicons.title}}</view>
            <view class="weui-cell__ft weui-cell__ft_in-access">{{listicon
s.desc}}</view>
        </navigator>
    </block></view>

listicons:[{      icon:"https:"
      title:"我的组件",      desc:""
    },
    {      icon:"https:"
      title:"我的收藏",      desc:"收藏列表"
    },
    {      icon:"https:"
      title:"我的邮件",      desc:""
    }
    ],