微信小程序实现首页图片多种排版布局!-即速应用

先来个效果图:

小程序

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