微信小程序-视频列表

index.wxml

  
    
    
      
      
      
        
        
          
          {{item.playcout}}
        
        
        
          
          {{item.comment}}
        
      
    
    
    
      {{item.title}}
    
  

index.js

Page({
  data:{

  },
  getImageList(){
    let that=this;
    wx.request({
      url:"http://localhost:3000/data",
      success(res){
        that.setData({
          list:res.data
        })
      }
    })
  },
  onLoad:function(){
    this.getImageList();
  }
})

index.wxss

navListTitle中font-size下面的内容一个都不能少，不然无法显示省略的样式

.main{
  display: flex;
  padding:5rpx;
  flex-wrap: wrap;
  justify-content: space-between;
}
.navList{
  width:48%;
  margin-bottom:20rpx;
}
.navListInfo{
  position:relative;
}
.navListInfo image{
  width:100%;
}
.navListTest{
  position:absolute;
  bottom:10rpx;
  display: flex;
  justify-content: space-around;
  font-size: 28rpx;
  left:0rpx;
  width:100%;
}
.navListTitle{
  font-size:28rpx;
  display: -webkit-box;
  /* 允许换行 */
  white-space:normal;
  /* 长字符运行换行显示 */
  word-wrap: break-word;
  /* 显示行数 */
  -webkit-line-clamp: 2;
  /* 垂直显示 */
  -webkit-box-orient: vertical;
  /* 超出部分隐藏 */
  overflow: hidden;
  /* 超出部分用'...'表示 */
  text-overflow: ellipsis; 
}

效果