实现效果:
index.wxml:
<view class="container">
<view class="selection" style="border:0">
<swiper indicator-dots="true"
autoplay="true" interval="3000" duration="1000">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" width="355" height="150"/>
</swiper-item>
</block>
</swiper>
</view>
<view class="selection">
<view class="header">
<text>精品推荐</text>
<text class="text-all">全部精品</text>
</view>
<view class="content">
<view class="content-item" wx:for="{{contentItems}}">
<image src="../../images/img1.jpg"/>
<view class="content-item-text">
<text>这里是标题</text>
</view>
</view>
</view>
</view>
<view class="selection">
<view class="header">
<text>热门评测</text>
<text class="text-all">全部评测</text>
</view>
<view class="list-item" wx:for="{{listItems}}">
<view class="list-item-images">
<image src="../../images/img2.jpg" class="list-item-images-img"/> <image src="../../images/avatar.jpeg" class="avatar"/>
</view>
<view class="list-item-text">
<view class="list-item-text-title">
<text>标题标题标题标题</text>
</view>
<view class="list-item-text-content">
<text>这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,这里是内容,</text>
</view>
</view>
</view>
</view>
</view>
index.wxss:
.selection{
border-bottom: 4px solid #ddd;
}
.header{
border-left-width: 2px;
border-left-style: solid;
border-left-color: limegreen;
display: flex;
justify-content: space-between;
align-items: center;
height: 60rpx;
padding-left: 30rpx;
padding-right: 30rpx;
margin-top: 30rpx;
margin-bottom: 30rpx;
}
.text-all{
color: limegreen;
font-size: 10px;
}
.content{
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
margin-bottom: 5px;
}
.content-item{
height: 250rpx;
width: 45%;
margin: 5px;
position: relative;
}
.content-item image{
width: 100%;
height: 100%;
}
.content-item-text{
position: absolute;
bottom: 0px;
color: white;
font-size: 10px;
background: -webkit-linear-gradient(bottom,rgba(0,0,0,0.8),rgba(0,0,0,0));
height: 125rpx;
width: 90%;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding-left: 5%;
padding-right: 5%;
padding-bottom: 3%;
}
.list-item{
height: 500rpx;
width: 100%;
}
.list-item-images{
height: 300rpx;
width: 100%;
position: relative;
}
.list-item-images-img{
height: 100%;
width: 100%;
}
.avatar{
width: 100rpx;
height: 100rpx;
border-radius: 50%;
position: absolute;
bottom: -50rpx;
right: 50rpx;
}
.list-item-text{
height: 200rpx;
width: 96%;
margin-top: 30rpx;
padding:0 3%;
}
.list-item-text-title{
font-weight: bold;
}
.list-item-text-content{
font-size: 10px;
color: #999;
margin-top: 20rpx;
}
index.js:
Page({
data: {
imgUrls:[
'https://i.loli.net/2020/02/21/gtN1icMTrALFPfb.jpg',
'https://i.loli.net/2020/02/21/42pTOevfVio1jWs.png',
'https://i.loli.net/2020/02/21/9elxq8TuMvWtRgs.jpg'
],
contentItems:['','','',''],
listItems: ['', '', '', '','', '', '']
}
})
总结:
通过几天的学习,我学会了使用view和swiper插件,学会了flew分布,学会了将text的背景颜色设为半透明,学会了编写简单的微信小程序