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

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

•  效果图

• 整体设计

     共分为三部分 

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">
          <text>5.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;
}