微信小程序实例代码

实现效果：

index.wxml:

<view class="container">

  <view class="selection" style="border:0">
  
     <swiper indicator-dots="true"
     autoplay="true" interval="3000" duration="1000">
        <block wx:for="{{imgUrls}}">
           <swiper-item>
              <image src="{{item}}" width="355" height="150"/>
           </swiper-item>
         </block>
      </swiper>
      
   </view>
   
  <view class="selection">
  
    <view class="header">
       <text>精品推荐</text>
       <text class="text-all">全部精品</text>
    </view>
    
    <view class="content">
       <view class="content-item" wx:for="{{contentItems}}">
          <image src="../../images/img1.jpg"/>
             <view class="content-item-text">
                <text>这里是标题</text>
             </view>
          </view>
      </view>
   </view>
   
   <view class="selection">
   
      <view class="header">
         <text>热门评测</text>
         <text class="text-all">全部评测</text>
      </view>
      
      <view class="list-item" wx:for="{{listItems}}">
      
         <view class="list-item-images">
            <image src="../../images/img2.jpg" class="list-item-images-img"/>        <image src="../../images/avatar.jpeg" class="avatar"/>
         </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>
      </view>
   </view>
</view>

index.wxss:

.selection{
  border-bottom: 4px 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: 30rpx;
  padding-right: 30rpx;
  margin-top: 30rpx;
  margin-bottom: 30rpx;
}

.text-all{
  color: limegreen;
  font-size: 10px;
}

.content{
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin-bottom: 5px;
}

.content-item{
  height: 250rpx;
  width: 45%;
  margin: 5px;
  position: relative;
}

.content-item image{
  width: 100%;
  height: 100%;
}

.content-item-text{
  position: absolute;
  bottom: 0px;
  color: white;
  font-size: 10px;
  background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.8),rgba(0,0,0,0));
  height: 125rpx;
  width: 90%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-left: 5%;
  padding-right: 5%;
  padding-bottom: 3%;
}

.list-item{
  height: 500rpx;
  width: 100%;
}

.list-item-images{
  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{
  height: 200rpx;
  width: 96%;
  margin-top: 30rpx;
  padding:0 3%;
}

.list-item-text-title{
  font-weight: bold;
}

.list-item-text-content{
  font-size: 10px;
  color: #999;
  margin-top: 20rpx;
}

index.js:

Page({
  data: {
     imgUrls:[
        'https://i.loli.net/2020/02/21/gtN1icMTrALFPfb.jpg',
        'https://i.loli.net/2020/02/21/42pTOevfVio1jWs.png',
        'https://i.loli.net/2020/02/21/9elxq8TuMvWtRgs.jpg'
      ],
      contentItems:['','','',''],
      listItems: ['', '', '', '','', '', '']
   }
})

总结：
通过几天的学习，我学会了使用view和swiper插件，学会了flew分布，学会了将text的背景颜色设为半透明，学会了编写简单的微信小程序