列表渲染與條件渲染

時間 2019-11-29

標籤列表渲染條件简体版

原文原文鏈接

做者 | Jeskson
來源 | 達達前端小酒館前端

列表渲染與條件渲染web

如何渲染數組類型和對象類型的數據算法

渲染數組⾥的全部數據編程

相同的結構是列表渲染的前提，列表等都會有⼏千上萬條的數據，它們的共同的特徵就是數據的結構相同。數組

data: {
    newstitle:[
      "幸咖啡",
      "騰：年",
      "總投資20億元",
      "京數量同⽐增⻓163%",
      "騰超五千萬",
    ],
  }

如何把整個列表都渲染出來呢？網絡

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

wx:for=」{{newstitle}}」，就是在數組newstitle⾥進⾏循環數據結構

*this表明在 for 循環中的 item 自己，⽽{{item}}的item是默認的app

<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 前端相關的技術文章、工具資源、精選課程、熱點資訊。

若本號內容有作得不到位的地方（好比：涉及版權或其餘問題），請及時聯繫咱們進行整改便可，會在第一時間進行處理。