微信小程序实现首页图片多种排版布局!

先来个效果图:

使用技术主要是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;
}