微信小程序實現首頁圖片多種排版佈局!

先來個效果圖:

使用技術主要是flex佈局,絕對定位佈局,小程序前端頁面開發,以及一些樣式!

直接貼代碼,都有詳細註釋,熟悉一下,方便之後小程序開發!

wxml:

<view class='indexcontainer'>
  <!-- 頂部推薦圖片輪播 -->
  <view class='selection'>
    <swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}">
        <block wx:for="{{imgUrls}}" wx:key="*this">
          <swiper-item> 
            <image src="{{item}}" class="slide-image" mode='scaleToFill' />
          </swiper-item>
        </block>
    </swiper>
  </view>
  <!-- 第二部分-->
  <view class='selection'>
    <!-- 頭部文字 -->
    <view class="header">
      <text style='margin-left: 5px;'>英傑之詩</text>
      <text class='all'>英雄的回憶</text>
    </view>
    <!-- 內容 -->
    <view class='content'>
      <view class='content-item' wx:for="{{contentImgUrls}}" wx:key="url" wx:for-item="item">
        <!-- 圖片 -->
        <image src="{{item.url}}" class="slide-image" mode='scaleToFill'/>
        <!-- 圖片上的文字說明 -->
        <view class='content-item-title'>
          <text>{{item.title}}</text>
        </view>
      </view>
    </view>
  </view>
  <!-- 第三部分 -->
  <view class='selection'>
    <!-- 頭部文字 -->
    <view class="header">
      <text style='margin-left: 5px;'>神廟攻略</text>
      <text class='all'>海拉爾歷險記</text>
    </view>
    <!-- 內容 --> 
    <view class='list-item' wx:for="{{HotImgUrls}}" wx:key="url" wx:for-item="item">
      <!-- 文章圖片 -->
      <view class='list-item-image'>
        <image src='{{item.url}}'  class="slide-image" mode='scaleToFill'></image>
        <!-- 做者頭像 -->
        <image src='{{item.head}}'  class="avatar" mode='scaleToFill'></image>
      </view>
      <!-- 文章內容 -->
      <view class='list-item-text'>
        <view class='list-item-text-title'>
          <text>{{item.title}}</text>
        </view>
        <view class='list-item-text-context' >
          <text>{{item.content}}</text>
        </view>
      </view>
    </view>
  </view>
</view>

　　js:

Page({
  data: {
    //頂部輪播圖
    imgUrls: [
      'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=63967211,2305810881&fm=27&gp=0.jpg',
      'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3265697507,322543478&fm=27&gp=0.jpg',
      'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=985354164,1752304932&fm=26&gp=0.jpg'
    ],
    //第二部分數據數組
    contentImgUrls:[
      {
        title:'塞爾達公主',
        url:'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2716688360,1326705556&fm=27&gp=0.jpg'
      },{
        title:'卓拉公主-彌法老婆',
        url:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2527034280,2956682531&fm=27&gp=0.jpg'
      },{
        title:'塞爾達公主',
        url:'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=689739696,3300191086&fm=27&gp=0.jpg'
      },{
        title:'塞爾達公主',
        url:'http://img4.imgtn.bdimg.com/it/u=4258802685,2724420509&fm=26&gp=0.jpg'
      }
    ],
    //死三部分數據
    HotImgUrls: [
      {
        //頭像地址,文字標題,文字內容,圖片地址
        head:'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg',
        title:'海拉爾平原的冒險',
        content: '海拉爾區是隸屬內蒙古自治區呼倫貝爾市的一個市轄區，是呼倫貝爾市政治、經濟、文化中心。該區位於內蒙古自治區東北部，區域範圍爲東經119°30′48〃— 120°35′36〃；北緯49°5′44〃—19°27′15〃，面積1440平方千米。',
        url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=1532027772,1266945951&fm=27&gp=0.jpg'
      }, 
      {
        head: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg',
        title: '拯救塞爾達公主吧',
        content: '卓拉公主-彌法老婆',
        url: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=2404695142,3634522143&fm=27&gp=0.jpg'
      }, 
      {
        head: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg',
        title: '快速開地圖塔',
        content: '塞爾達公主',
        url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2225874892,982427892&fm=26&gp=0.jpg'
      }, 
      {
        head: 'https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1037527703,3129433808&fm=27&gp=0.jpg',
        title: '滑翔傘得到攻略',
        content: '塞爾達公主',
        url: 'https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=4216945098,3102493232&fm=26&gp=0.jpg'
      }
    ],
    indicatorDots: true, //顯示面板顯示點
    autoplay: false,  //自動切換
    interval: 5000,  //切換時間
    duration: 1000  //動畫時長
  },

　　css樣式:

page{
    height: 100%;
}
.selection{
  border-bottom: 6px solid #ddd;
}
.indexcontainer{
  width: 100%;
  height: 100%;
}
.selection{
  margin-top: 10px;
}
.slide-image{
  width: 100%;
  height: 100%;
}
.header{
  border-left-width: 2px;
  border-left-style: solid;
  border-left-color: green;
  display: flex;
  justify-content: space-between;
  height: 30px;
  padding-left: 10rpx;
  padding-right: 10rpx;
  margin-top: 10px;
  margin-bottom: 10px;
}
.all{
  margin-right: 5px;
  color: green;
}
.content{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.content-item{
  width: 47%;
  height: 280rpx;
  background-color: red;
  margin: 5px;
  /* 絕對定位的父級必需要定位 */
  position: relative;
}
.content-item-title{
  position: absolute; /*絕對定位,文字覆蓋圖片上*/
  color: white;
  bottom: 0px; /* 位置在父級元素底部 */
  font-size: 17px;
  width: 98%;
  height: 100rpx; /* 設置容器高度,顯示漸變的高度 */
  text-align: center;
  /* 背景漸變:bottom:從下到上,右0.8向0透明漸變 */
  background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.5),rgba(0,0,0,0));
  display: flex; /* flex佈局,控制容器內文字元素在底部 */
  flex-direction: column;
  justify-content: flex-end;
  padding: 1% 1% 1% 1%;
}
.list-item{
  width: 100%;
  height: 500rpx;
}
.list-item-image{
  width: 100%;
  height: 300rpx;
  position: relative;
}
.list-item-text{
  width: 96%;
  height: 200rpx;

}
.avatar{
  width: 90rpx;
  height: 90rpx;
  border-radius: 50%;
  position: absolute;
  bottom: -45rpx;
  right: 50rpx;
}
.list-item-text{
  margin-top: 10px;
  padding-left: 2%;
  padding-right: 2%;
}
.list-item-text-context{
  font-size: 12px;
  margin-top: 8px;
  color: #999;
}