先来个效果图:

使用技术主要是flex布局,绝对定位布局,小程序前端页面开发,以及一些样式!

直接贴代码,都有详细注释,熟悉一下,方便以后小程序开发!

wxml:

英杰之诗

英雄的回忆

{{item.title}}

神庙攻略

海拉尔历险记

{{item.title}}

{{item.content}}

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;

}