微信小程序组件篇实战

实现效果如下:

实现代码如下:

index.wxml:

<!--index.wxml-->
<view class="container">
  <view class = "selection">
    <swiper indicator-dots="true"
    autoplay="true" interval="3000" duration="1000">
    <block wx:for="{{imgUrls}}">
      <swiper-item>
        <image src="{{item}}" class="slide-image" width="355" height="150"/>
      </swiper-item>
    </block>
    </swiper>
  </view>

   <view class = "selection">
    <view class = "header">
      <text>精品推荐</text>
       <text class = "all_text">精品推荐</text>
    </view>

    <view class = "content">
    <!--for循环-->
      <view class = "content_item" wx:for = "{{content_item}}">
        <image src="../../images/3.png"/>
        <view class = "text_item">
          <text>我是标题哟哟!!!</text>
        </view>
         </view>
      </view>
  </view>

   <view class = "selection">
    <view class = "header">
      <text>热门评测</text>
       <text class = "all_text">全部评测</text>
    </view>

    <view class = "list_item" wx:for = "{{list_item}}">
     <view class = "big_image">
      <image src="../../images/4.png" class = "big_image"/>
      <image src="../../images/2.png" class = "avater" />
     </view>
     <view class = "list_item_title_text">
      <text>思思思思思思思思思思思思思思思思思思思思思思思思思思</text>
     </view>
     <view class = "list_item_content_text">
      <text>思思思思思思思思思思思思思思思思思思思</text>
     </view>
    </view>
  </view>
</view>

index.wxss:

.header{
  border-left- 2px;
  border-left-color: green;
  border-left-style: solid;
  /*flex布局*/
  display: flex;
  /*两端对齐*/
  justify-content: space-between;  
  /*居中对齐*/
  align-content: center;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-top: 10rpx;
  margin-bottom: 10rpx;
}

.all_text{
  color: green;
  font: 10px;
}

.content{
  display: flex;
  /*换行*/
  flex-wrap: wrap;
  /*方向*/
  flex-direction: row;
  /*水平方向居中对齐*/
  justify-content: center;
}

.content_item{
   45%;
  height: 250rpx;
  background-color: darkgoldenrod;
  margin: 5px;
  /*绝对定位*/
  position: relative;
}

/*设置图片样式*/
.content_item image{
   100%;
  height: 100%;
}

.text_item text{
  /*相对布局*/
  position: absolute;
  bottom: 0px;
  color: white;
  font: 10px;
  /*设置渐变  参数一:从哪开始,参数二:设置颜色 黑色 参数三:到哪哪  透明*/
  background: -webkit-linear-gradient(bottom,rgba(0, 0, 0, 0.5),rgba(0, 0, 0, 0));
  height: 125rpx;
   100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 1%;
  padding-right: 1%;
}

/*列表*/
.list_item{
  height: 500rpx;
   100%;
  /*position: relative;*/
  background: gainsboro;
}

.big_image{
  height: 300rpx;
   100%;
  position: relative;
}

/*列表大图*/
/*.big_image image{
  height: 100%;
   100%;
}*/
/*.big_image{
  height: 100%;
   100%;
}*/

.list_item_text text{
  height: 200rpx;
   100%;
}

.avater{
  height: 100rpx;
   100rpx;
  /*弧度*/
  border-radius: 50%;
  bottom: -50rpx;
  right: 50rpx;
  /*绝对定位*/
  position: absolute;
}

.list_item_title_text{

  color: black;
  font: 15px;
  margin-top: 70rpx;
  padding-left: 10rpx;
  padding-right: 10rpx;
}

.list_item_content_text{
  color: lightgray;
  font: 8px;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-top: 10rpx;
}

里面有设置相应代码注释哟!!!一起学习..加油!!!