微信小程序实战—页面布局—评测小程序首页实现

微信小程序页面设计__手机评测小程序首页实现

•  效果图

• 整体设计

     共分为三部分 

1. 宣传页播放  swiper组件实现

2. 精品推荐

3. 热门评测

• 关键代码

 index.js

Page({
  data: {
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    contentItems: [' ', ' ', ' ', ' '],
    listItems: [' ', ' ', ' ', ' ', ' ', ' ', ' ']
  }
})

 index.wxml

  
    
      
        
          
        
      
    
  

  
    
      精品推荐
      全部精品
    
    
      
        
        
          定金50抵100  享3期免息
        
      
    
  

  
    
      热门评测
      全部评测
    
    
      
        
      
      
        
          机身更小  视野更大
        
        
          5.8英寸超清全面屏 19.9秀场机身 前置2400万自然美妆 搭载新一代自然美妆算法 夜拍黑科技
        
      
    
  

 index.wxss

 .selection1{
   border-bottom: 5px solid #ddd;
 }
.header {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: limegreen;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 60rpx;
  padding-left: 15rpx;
  padding-right: 15rpx;
 margin-top: 15rpx;
 margin-bottom: 15rpx;
}
.swiper-item_ image {
  height: 100%;
  width: 100%;
}
.text-all {
  color: green;
  font-size: 15px;
}
.content {
  display: flex;
  flex-direction: row; /*行排列（默认)*/
  flex-wrap: wrap;
  justify-content: cennter;
}
.content-item {
  height: 250rpx;
  width: 47.3%;
  background-color: goldenrod;
  margin: 5px;
  position: relative; /*父view 进行定位*/
}
.content-item image {
  width: 100%;
  height: 100%;
}
.content-item-text {
  position: absolute;
  bottom: 0px; /*绝对布局 位于父view下方*/
  color: white;
  font-size: 10px;
  background: linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  height: 125rpx;
  width: 98%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 1%;
  padding-right: 1%;
  padding-bottom: 1%;
}
.list-item {
  height: 500rpx;
  width: 100%;
}
.list-item-images { /*小圆行的父view*/
  height: 300rpx;
  width: 100%;
  position: relative;
}
.list-item-images-img {
  height: 100%;
  width: 100%;
}
.avatar{
  width: 100rpx;
  height: 100rpx;
  border-radius: 50%;
  position: absolute; /*相对父view的绝对布局*/
  bottom: -50rpx;
  right:50rpx;
}
.list-item-text {
  height: 200rpx;
  width: 95%;
  margin-top: 20rpx;
  padding-left: 2%;
  padding-right: 2%;
}
.list-item-text-content{
font-size: 25rpx;
color: #999;
margin-top: 20rpx;
}