列表渲染与条件渲染

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

列表渲染与条件渲染

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

渲染数组⾥的全部数据

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

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" 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 前端相关的技术文章、工具资源、精选课程、热点资讯。

---

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

---

请点赞！由于大家的赞同/鼓励是我写做的最大动力！

欢迎关注达达的CSDN！

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