微信小程序，首页的实现

源码位置https://download.csdn.net/download/qq_21036939/10815970

昨天晚上画时间实现了一下首页效果，轮播图+网格布局+列表

总体感觉像轮播图这种相比Android用着要方便很多（不过Android轮播图控件一般都用封装好的，也不麻烦），在布局定义这块，感觉比Android要麻烦的多（前端菜鸟，也没话说）

1，swiper的使用

  <view class="selection">
  <!-- 分别定义，是否显示点，自动播放，显示时间，切换时间 -->
    <swiper indicator-dots="true" autoplay="ture" interval="3000" duration="1000">
      <block wx:for="{{imgUrls}}"> <!--imgUrls数组，下边循环显示每个item-->
        <swiper-item>
          <image src="{{item}}" class="slide-image" width="355" height="150" />
        </swiper-item>
      </block>
    </swiper>
  </view>

2,精品推荐标题布局实现，flex的使用

在index.wxml中编写布局

 <view class='header'>
      <text>精品推荐</text>
      <text class="text-all">全部精品</text>
    </view>
  </view>

在index.wxss中编写样式

.header{
  /* header是这个布局的整体，设置左边的绿色竖杠 */
  border-left-width: 3px;
  border-left-style: solid;
  border-left-color: rgb(10, 134, 10);
  /* 实现效果要用flex */
  display: flex;
  /* 主轴（横向）该参数使布局中的模块均匀分开 */
  justify-content: space-between;
  /* 竖轴，居中 */
  align-content: center;
  height: 60rpx;
  /* 该布局中的元素距左右分别10rpx */
  padding-left: 10rpx;
  padding-right: 10rpx;
  /* 该布局距上部10rpx */
  margin-top: 10rpx;

}
.text-all{
  color: rgb(84, 134, 8);
  font-size: 10px;
}

3，网格布局，重点是文字在图片上边，而且文字的背景为渐变的黑色背景

在index.wxml中编写布局

<view class='content'>
  <!-- wx:for循环使用该布局 -->
    <view class='content-item' wx:for="{{contentitems}}">
      <image src='../../images/image3.png' />
      <view class='content-item-text'>
        <text>
        这是图片下的文字
        </text>
      </view>
    </view>
  </view>

在index.js中设置数组的数据

在index.wxss中编写样式

.content{
  display: flex;
  /* 横向排列，多出的自动换行；水平居中 */
  flex-direction: row;
  flex-wrap: wrap; 
  justify-content: center;

  }
.content-item{
  /* 每个item的宽高，距周围的距离 */
  height: 250rpx;
  width: 45%;
  margin: 5px;
/* 设定父布局的位置 */
  position: relative;
}
.content-item image{
  width: 100%;
  height: 100%;
}
.content-item-text{
  width: 98%;
  height: 125rpx;
  /* 设定文字的绝对位置，首先要设定父布局的位置 */
  position: absolute;
  bottom: 0px;
  color: #fff;
  font-size: 10px;
  /* 设置文字的渐变背景色 */
  background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.8),rgba(0,0,0,0));
  display: flex;
  /* 文字在最下边，所以垂直布局，显示在下边 */
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 1%;
  padding-bottom: 1%;
  padding-right:  1%;
}

4，列表实现，列表分为图片+下边文字+加中间的小圆图标

在index.wxml中编写布局

   <!-- 列表的整体布局  -->
    <view class='list-item' wx:for="{{listitem}}">
        <view class='list-item-images'>
          <image class="list-item-images-img" src='../../images/image4.png' />
          <image class="avatar" src='../../images/image3.png' />
        </view>
        <view class=' list-item-text '>
          <view class='list-item-text-title'> 
            <text>这是标题</text>
          </view>
          <view class='list-item-text-content'> 
            <text>这是内容，这是内容，这是内容，这是内容，这是内容，这是内容，这是内容，</text>
          </view>
          
        </view>

在index.wxss中编写样式

.list-item{
  /* 列表布局的整体宽高 */
  height: 500rpx;
  width: 100%;
}
.list-item-images{
  /* 列表中图片布局的宽高，占整体3/5 */
  height: 300rpx;
  width: 100%;
  /* 小圆使用绝对布局，要确定父布局的位置 */
  position: relative;
}
.list-item-images-img{
  height: 100%;
  width: 100%;
}
.avatar{
  width: 100rpx;
  height: 100rpx;
  /* 小圆设置为圆 */
  border-radius: 50%;
  /* 设置小圆的位置 */
  position: absolute;
  bottom: -50rpx;
  right: 50rpx;
}
.list-item-text{
  /* 文字占2/5 */
  height: 200rpx;
  width: 96%;
  margin-top: 20px;
  padding-top: 0px;
  padding-left: 10rpx;
  padding-right: 10rpx;
}

就这样，完了