列表渲染与条件渲染

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

列表渲染与条件渲染

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

渲染数组⾥的所有数据

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

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

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

  {{item}} 

wx:for=”{{newstitle}}”，就是在数组newstitle⾥进⾏循环

*this代表在 for 循环中的 item 本身，⽽{{item}}的item是默认的

  {{title}} 

默认数组的当前项的下标变量名默认为 index

数组当前项的变量名默认为 item，wx:for-item 可以指定数组当前元素的变量名，wx:for-index 可以指定数组当 前下标的变量名

电影列表⻚⾯

    movies: [{
      name: "肖申克的救赎",
      img:"httpsublic/p480bp",
      desc:"有的⼈的⽻翼是如此光辉，即使世界上最⿊暗的牢狱，也⽆法⻓久地将他围困！"},
      {
        name: "霸王别姬",
        img: "https://ic/pwebp",
        desc: "⻛华绝代。"
      },
      {
        name: "⾟德勒名单",
         img: "https:/",
        desc: "拯救⼀个⼈，就是拯救整个世界。"
      },    
    ],

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

图⽚样式

图⽚的模式mode，图⽚的模式默认为scaleToFill，也就 是不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满 image 元素

希望图⽚保持宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变

⽤到widthFix 的模式

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

    
        
            
                
                {{grid.title}}
            
        
    

grids:[
      { imgurl:"https:",
        title:"2"
      },
      {
        imgurl: "https:",
        title: "1"
      },
    ]

    
        
            
                
            
            {{listicons.title}}
            {{listicon
s.desc}}
        
    

listicons:[{
      icon:"https:"
      title:"我的⽂件",
      desc:""
    },
    {
      icon:"https:"
      title:"我的收藏",
      desc:"收藏列表"
    },
    {
      icon:"https:"
      title:"我的邮件",
      desc:""
    }
    ],