微信小程序 scroll-view 中使用flex布局

scroll-view

小程序中为了可滚动视图区域要得使用scroll-view,但scroll-view有致命的缺陷,就是不支持flex布局。但我们可以通过使用view来包裹scroll-view的方法来使用flex布局.
下面直接上代码:


  head
  
    
      
        
          
            
          
          人人都会小程序
          免费
        
        
          
            
          
          人人都会小程序
          免费
        
        
          
            
          
          人人都会小程序
          免费
        
        
          
            
          
          人人都会小程序
          免费
        
        
          
            
          
          人人都会小程序
          免费
        
        
          
            
          
          人人都会小程序
          免费
        
        
          
            
          
          人人都会小程序
          免费
        
        
          
            
          
          人人都会小程序
          免费
        
        
          
            
          
          人人都会小程序
          免费
        
        
          
            
          
          人人都会小程序
          免费
        
      
    
  

  
    
      
        
      
      首页
    
    
    
      
        
      
      分类
    
   
    
      
      课程表
  
  
  
      
      我的
  
  

.head,.bottom{
  background-color: #ddd;
  width: 100%;
}
.body{
  height: 100vh;
  display:flex;
  flex-direction: column;
}
.list{
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.list-wraper{
  flex-grow: 1;
  position:relative;
}
.list-inner{
 display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: flex-start;
}
.course-card{
  margin-top: 10px;
  width:46vw;
  margin-left: 2vw;
  margin-right: 2vw;
}
.course-card image{
  width:100%;
  border-radius: 5px;
}
.price{
  color:blue;
}

.bottom{
  display: flex;
  justify-content: space-around;
  background-color: white;
}

.guide-item{
  padding: 10px;
  font-size: 12px;
  line-height: 1;
  padding-top: 10px;
  padding-bottom: 10px;
}
.guide-item image{
  width:34px;
}
.text{
  margin-left:5px;
}

效果图如下:
微信小程序 scroll-view 中使用flex布局_第1张图片
这里滚动区域用到了flex布局,首先整个滚动区域在这个body区域内是flex布局的,而且那些每一个小卡片(人人都会小程序)这些也在scroll-view区域内是flex布局的。
现在看代码结构;
微信小程序 scroll-view 中使用flex布局_第2张图片

scroll-view被上面的class="list-wraper"的view裹住,因为scroll-view区域在整个body区域内是一个flex-item,并且scroll-view不支持flex布局,必须得用view来裹住.
而对于scroll-view内的view,也是因为同样的原因,因为scroll-view内的那些课程信息每一个是一个flex-item,必须使用felx来布局,因此得使用view来裹住scroll-view内的内容.

你可能感兴趣的:(小程序)