列表渲染与条件渲染

我就是我 2021-08-19 19:13 527阅读 0赞

![file][]

作者 | Jeskson来源 | 达达前端小酒馆

列表渲染与条件渲染

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

渲染数组⾥的所有数据

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

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

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

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" s
    rc="{
       {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}}</v
    iew>
                        <view class="weui-media-box__desc">{
       {movies.desc}}</vi
    ew>
                    </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:""
        }
        ],

## ❤️ 不要忘记留下你学习的脚印 \[点赞 收藏 评论\] ##

作者Info：

【作者】：Jeskson

【原创公众号】：达达前端小酒馆。

【转载说明】：转载请说明出处，谢谢合作！~

关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您发现，真是慧眼识英！也感谢您的关注，在未来的日子里，希望能够一直默默的支持我，我也会努力写出更多优秀的作品。我们一起成长，从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。

###  ###

若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

###  ###

## 请点赞！因为你们的赞同/鼓励是我写作的最大动力！ ##

### 欢迎关注[达达][Link 1]的CSDN！ ###

**这是一个有质量，有态度的博客**

![7d927f18ebd05ea1d505a572393fbc87.jpg][]

[file]: /images/20210724/4d8bfa64a248435d96eec21178904817.png
[Link 1]: https://blog.csdn.net/qq_36232611
[7d927f18ebd05ea1d505a572393fbc87.jpg]: /images/20210724/80798219398a4c10ae1f2e90f81f47e7.png