首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >列表渲染与条件渲染

列表渲染与条件渲染

作者头像
达达前端
发布2019-11-29 12:13:36
1.6K0
发布2019-11-29 12:13:36
举报
文章被收录于专栏:达达前端达达前端

file

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


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


本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档