日韩无码专区无码一级三级片|91人人爱网站中日韩无码电影|厨房大战丰满熟妇|AV高清无码在线免费观看|另类AV日韩少妇熟女|中文日本大黄一级黄色片|色情在线视频免费|亚洲成人特黄a片|黄片wwwav色图欧美|欧亚乱色一区二区三区

在數(shù)據(jù)綁定的章節(jié)，我們學(xué)習(xí)了如何渲染數(shù)組類型和對象類型的數(shù)據(jù)，但是當(dāng)時(shí)只是輸出了數(shù)組里或?qū)ο蟮臄?shù)組里的某一個(gè)數(shù)據(jù)，如果是要輸出整個(gè)列表呢？這個(gè)時(shí)候就需要用到列表渲染啦。

渲染數(shù)組里的所有數(shù)據(jù)

相同的結(jié)構(gòu)是列表渲染的前提

在實(shí)際的開發(fā)場景里，商品、新聞、股票、收藏、書架列表等都會(huì)有幾千上萬條的數(shù)據(jù)，他們都有一個(gè)共同的特征就是數(shù)據(jù)的結(jié)構(gòu)相同，這也是我們可以批量化渲染的前提。還是以前面的互聯(lián)網(wǎng)快訊的數(shù)據(jù)為例，下面的新聞標(biāo)題他們的結(jié)構(gòu)就非常單一。

 data: {
    newstitle:[
      "瑞幸咖啡：有望在三季度達(dá)到門店運(yùn)營的盈虧平衡點(diǎn)",
      "騰訊：廣告高庫存量還是會(huì)持續(xù)到下一年",
      "上汽集團(tuán)云計(jì)算數(shù)據(jù)中心落戶鄭州，總投資20億元",
      "京東：月收入超2萬元快遞小哥數(shù)量同比增長163%",
      "騰訊：《和平精英》日活躍用戶已超五千萬",
    ],
  }

那我們應(yīng)該如何把整個(gè)列表都渲染出來呢？這里涉及到JavaScript數(shù)組遍歷的知識，JavaScript數(shù)組遍歷的方法非常多，因此小程序數(shù)組的渲染也有很多方法，所以大家看技術(shù)文檔的時(shí)候會(huì)有點(diǎn)混亂。

技術(shù)文檔：列表索引

  {{item}}

這里wx:for=”{{newstitle}}”，也就是在數(shù)組newstitle里進(jìn)行循環(huán)，*this代表在 for 循環(huán)中的 item 本身，而{{item}}的item是默認(rèn)的。也可以使用如下方法：

      {{title}}
    

默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index，數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item；
使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名，使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名。

電影列表頁面

首先我們把多部電影的數(shù)據(jù)寫在data里面，相當(dāng)于是一個(gè)數(shù)組類型的數(shù)據(jù)里面，包含著多個(gè)對象類型的數(shù)據(jù)。

    movies: [{
      name: "肖申克的救贖", 
      img:"https://img3.doubanio.com/view/photo/s_ratio_poster/public/p480747492.webp",
      desc:"有的人的羽翼是如此光輝，即使世界上最黑暗的牢獄，也無法長久地將他圍困！"},
      {
        name: "霸王別姬",
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1910813120.webp",
        desc: "風(fēng)華絕代。"
      },
      {
        name: "這個(gè)殺手不太冷",
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p511118051.webp",
        desc: "怪蜀黍和小蘿莉不得不說的故事。"
      },
      {
        name: "阿甘正傳",
        img: "https://img1.doubanio.com/view/photo/s_ratio_poster/public/p510876377.webp",
        desc: "一部美國近現(xiàn)代史。"
      },
      {
        name: "美麗人生",
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p510861873.webp",
        desc: "最美的謊言。"
      },
      {
        name: "泰坦尼克號",
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p457760035.webp",
        desc: "失去的才是永恒的。"
      },
      {
        name: "千與千尋",
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p1606727862.webp",
        desc: "最好的宮崎駿，最好的久石讓。"
      },
      {
        name: "辛德勒名單",
        img: "https://img3.doubanio.com/view/photo/s_ratio_poster/public/p492406163.webp",
        desc: "拯救一個(gè)人，就是拯救整個(gè)世界。"
      },     
    ],

然后我們也把數(shù)據(jù)綁定章節(jié)的代碼改一下，添加一個(gè)wx:for語句，來把列表里的數(shù)據(jù)給循環(huán)渲染出來。

        
            
                
                    
                        
                    
                    
                        {{movies.name}}
                        {{movies.desc}}
                    
                
            
        
    

這里用到了一個(gè)wx:for-item，給了它一個(gè)值是movies，其實(shí)也可以是其他值，比如dianying，那{{movies.img}}、{{movies.name}}、{{movies.desc}}也相應(yīng)的為{{dianying.img}}、{{dianying.name}}、{{dianying.desc}}。為什么這樣？這個(gè)也是JavaScript的一個(gè)知識，可以先不必深究。

圖片樣式

我們發(fā)現(xiàn)電影列表里面的圖片是變形的，為什么呢？回到我們之前學(xué)的image組件，我們?nèi)ゲ榭匆幌耰mage組件文檔，從技術(shù)文檔里找答案。

技術(shù)文檔：image組件文檔

在技術(shù)文檔里，我們發(fā)現(xiàn)如果我們不寫圖片的模式mode，圖片的模式默認(rèn)為scaleToFill，也就是不保持縱橫比縮放圖片，使圖片的寬高完全拉伸至填滿 image 元素。

那我們希望圖片保持寬度不變，高度自動(dòng)變化，保持原圖寬高比不變，那就需要用到widthFix的模式啦。

我們給image組件添加widthFix模式，

添加完模式之后，發(fā)現(xiàn)圖片比例顯示正常了，但是image組件出現(xiàn)了溢出的現(xiàn)象，這是因?yàn)閣eui給class為weui-media-box__hd_in-appmsg 的組件定義了一個(gè)height:60px的css樣式，也就是限制了高度，那我們可以在home.wxss里添加

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

        
            
                
                    
                    {{grid.title}}
                
            
        
    

grids:[
      { imgurl:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon1.png",
        title:"招聘"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon2.png",
        title: "房產(chǎn)"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon3.png",
        title: "二手車新車"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon4.png",
        title: "二手"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon5.png",
        title: "招商加盟"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon6.png",
        title: "兼職"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon7.png",
        title: "本地"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon8.png",
        title: "家政"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon9.png",
        title: "金幣奪寶"
      },
      {
        imgurl: "https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/icon10.png",
        title: "送現(xiàn)金"
      },
    ]

.weui-grid{
      width: 20%;
    }

        
            
                
                    
                
                {{listicons.title}}
                {{listicons.desc}}
            
        
    

listicons:[{
      icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons1.png",
      title:"我的文件",
      desc:""
    },
    {
      icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons2.png",
      title:"我的收藏",
      desc:"收藏列表"
    },
    {
      icon:"https://hackweek.oss-cn-shanghai.aliyuncs.com/hw18/hackwork/weapp/listicons3.png",
      title:"我的郵件",
      desc:""
    }
    ],