先来个效果图:
使用技术主要是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;
}