UI界面Demo - 微信小程式

index.wxml

<!--index.wxml-->
<view class="selection">

  <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{3000}}" duration="{{1000}}" circular="true">
    <swiper-item wx:for="{{background}}" wx:key="">
      <view>
        <image src="{{item}}" mode="widthFix" style='width:100%;' />
      </view>
    </swiper-item>
  </swiper>

</view>

<view class="selection">

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

  <view class="content">
    <view class="content-item" wx:for="{{contentItem}}" wx:key="">

      <image src="{{item.img}}" />
      <view class="content-item-text">
        <text>
          {{item.text}}
        </text>
      </view>
    </view>
  </view>

</view>

<view class="selection">

  <view class="header">
    <text class="text-rec">熱門評測</text>
    <text class="text-all">全部評測</text>
  </view>

  <view class="list-item" wx:for="{{listItem}}">

    <view class="list-item-images">
      <image src="{{item.img}}" class="list-item-images-img" />
      <image src="{{item.photo}}" class="photo" />
    </view>
    <view class="list-item-text">
      <view class="list-item-text-title">
        <text>{{item.text}}</text>
      </view>

      <view class="list-item-text-content">
        相對定位的元素是相對自身進行定位, 參照物是自己. 絕對定位的元素是相對離它最近的一個已定位的父級元素(若父元素都沒有定位...
      </view>
    </view>
  </view>

</view>      

index.wxss

swiper {
  width: 100%;
  height: 180px;
}

.header {
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: rgb(115, 209, 115);
  display: flex;
  justify-content: space-between;
  align-content: center;
  height: 60rpx;
  padding-left: 18rpx;
  padding-right: 18rpx;
  margin-top: 10rpx;
}

.text-rec {
  margin-top: 10rpx;
}

.text-all {
  margin-top: 30rpx;
  color: rgb(75, 194, 154);
  font-size: 13px;
}

.content {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
}

.content-item {
  height: 255rpx;
  width: 46%;
  background-color: rosybrown;
  margin: 5px;
  position: relative;
}

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

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

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

.list-item-images {
  height: 300rpx;
  width: 100%;
  position: relative;
}

.list-item-images-img {
  height: 100%;
  width: 100%;
}

.photo {
  width: 80rpx;
  height: 80rpx;
  border-radius: 50%;
  background-color: blueviolet;
  position: absolute;
  bottom: -40rpx;
  right: 50rpx;
}

.list-item-text {
  height: 200rpx;
  width: 96%;
  
  padding-left: 2%;
  padding-right: 2%;
  margin-top: 20rpx;

}

.list-item-text-title {
  font-size: 20px;
  color: darkslategrey;
}

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

index.js

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    background: [
      'https://s2.ax1x.com/2019/10/31/KIJWFJ.md.jpg',
      'https://s2.ax1x.com/2019/10/31/KIJhWR.md.jpg',
      'https://s2.ax1x.com/2019/10/31/KIJIQx.md.jpg'
    ],
    contentItem: [{
        img: 'https://s2.ax1x.com/2019/10/31/KIJWFJ.md.jpg',
        text: 'Simle :)'
      },
      {
        img: 'https://s2.ax1x.com/2019/10/31/KIJhWR.md.jpg',
        text: 'breathe :)'
      },
      {
        img: 'https://s2.ax1x.com/2019/10/31/KIJIQx.md.jpg',
        text: 'go slowly :)'
      },
      {
        img: 'https://s2.ax1x.com/2019/10/31/KIJIQx.md.jpg',
        text: 'come on :)'
      }
    ],
    image: 'https://s2.ax1x.com/2019/10/31/KIJhWR.md.jpg',
    listItem: [{
        img: 'https://s2.ax1x.com/2019/10/31/KIJWFJ.md.jpg',
        text: 'Simle :)',
        photo: 'https://s2.ax1x.com/2019/10/31/KoxwFA.md.jpg'
      },
      {
        img: 'https://s2.ax1x.com/2019/10/31/KIJhWR.md.jpg',
        text: 'breathe :)',
        photo: 'https://s2.ax1x.com/2019/10/31/KoxIS0.jpg'
      },
      {
        img: 'https://s2.ax1x.com/2019/10/31/KIJIQx.md.jpg',
        text: 'go slowly :)',
        photo: 'https://s2.ax1x.com/2019/10/31/KTSXxx.jpg'
      },
      {
        img: 'https://s2.ax1x.com/2019/10/31/KIJIQx.md.jpg',
        text: 'come on :)',
        photo: 'https://s2.ax1x.com/2019/10/31/KTSxsK.jpg'
      }
    ]
  }
})