微信小程序实现展示图片(图片推广小程序可以使用)

实现效果图:微信小程序实现展示图片(图片推广小程序可以使用)_第1张图片微信小程序实现展示图片(图片推广小程序可以使用)_第2张图片

微信小程序实现展示图片(图片推广小程序可以使用)_第3张图片微信小程序实现展示图片(图片推广小程序可以使用)_第4张图片

首先就是这个封面是一些图片展示界面,后台返回的都是图片。然后根据返回数据数组的下标进行分类,第一排只显示数组为1,4,7一次类推,第二列是2,5,8的index,第三列是3,6,9等等,根据下标进行分类然后排版。没一列都网上堆叠即可。

上代码:wxml



    
      
        
          
            
              
              
            
          
        

        
          
            
              
              
            
          
        

        
          
            
              
              
            
          
        
      
    
  

WXSS:


.content_list {
  width: 100%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  margin-left:5rpx;
  /* border: 1px solid #f0f0f0; */
}

.item_pic {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: flex-start;
  width: 50%;
  flex-wrap: wrap;
}
.top{
  width: 100%;height:auto;
  background-color: white;
  z-index: 1;
}

 

你可能感兴趣的:(微信小程序学习,前端)