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

•  效果图

• 整体设计

     共分为三部分 

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

view class="container"  view class="selection"    swiper class="swiper_" indicator-dots="true" autoplay="true" interval="3000" duration="1000"      block wx:for="{{imgUrls}}" wx:key="key"        swiper-item class="swiper-item_"          image src="{{item}}" class="slide-image" width="355" height="150" /        /swiper-item      /block    /swiper  /view  view class="selection1"    view class="header"      text class='tuijian'精品推荐/text      text class="text-all"全部精品/text    /view    view class="content"      view class="content-item" wx:for="{{contentItems}"        image src="../../images/img1.png"/image        view class="content-item-text"          text定金50抵100  享3期免息/text        /view      /view    /view  /view  view class="selection"    view class="header"      text class='tuijian'热门评测/text      text class="text-all"全部评测/text    /view    view class="list-item" wx:for="{{listItems}}"      view class='list-item-images'        image src="../../images/avatar.png" class="avatar"/image      /view      view class='list-item-text'        view class="list-item-text-title"          text机身更小  视野更大/text        /view        view class="list-item-text-content"          text5.8英寸超清全面屏 19.9秀场机身 前置2400万自然美妆 搭载新一代自然美妆算法 夜拍黑科技/text        /view      /view    /view  /view/view

 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;}