index.wxml
<view class="selection">
<swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="{{3000}}" duration="{{1000}}" circular="true">
<swiper-item wx:for="{{background}}" wx:key="">
<view>
<image src="{{item}}" mode="widthFix" style='width:100%;' />
</view>
</swiper-item>
</swiper>
</view>
<view class="selection">
<view class="header">
<text class="text-rec">精品推荐
</text>
<text class="text-all">全部精品
</text>
</view>
<view class="content">
<view class="content-item" wx:for="{{contentItem}}" wx:key="">
<image src="{{item.img}}" />
<view class="content-item-text">
<text>
{{item.text}}
</text>
</view>
</view>
</view>
</view>
<view class="selection">
<view class="header">
<text class="text-rec">热门评测
</text>
<text class="text-all">全部评测
</text>
</view>
<view class="list-item" wx:for="{{listItem}}">
<view class="list-item-images">
<image src="{{item.img}}" class="list-item-images-img" />
<image src="{{item.photo}}" class="photo" />
</view>
<view class="list-item-text">
<view class="list-item-text-title">
<text>{{item.text}}
</text>
</view>
<view class="list-item-text-content">
相对定位的元素是相对自身进行定位, 参照物是自己. 绝对定位的元素是相对离它最近的一个已定位的父级元素(若父元素都没有定位...
</view>
</view>
</view>
</view>
index.wxss
swiper {
width: 100%
;
height: 180px
;
}
.header {
border-left-width: 2px
;
border-left-style: solid
;
border-left-color: rgb(115, 209, 115
);
display: flex
;
justify-content: space-between
;
align-content: center
;
height: 60rpx
;
padding-left: 18rpx
;
padding-right: 18rpx
;
margin-top: 10rpx
;
}
.text-rec {
margin-top: 10rpx
;
}
.text-all {
margin-top: 30rpx
;
color: rgb(75, 194, 154
);
font-size: 13px
;
}
.content {
display: flex
;
flex-direction: row
;
flex-wrap: wrap
;
justify-content: center
;
}
.content-item {
height: 255rpx
;
width: 46%
;
background-color: rosybrown
;
margin: 5px
;
position: relative
;
}
.content-item image {
width: 100%
;
height: 100%
;
}
.content-item-text {
position: absolute
;
bottom: 0px
;
font-size: 14px
;
color: white
;
background: -webkit-linear-gradient(bottom,
rgba(0, 0, 0, 0.5
),
rgba(0, 0, 0, 0
));
height: 125rpx
;
width: 96%
;
display: flex
;
flex-direction: column
;
justify-content: flex-end
;
padding-left: 3%
;
padding-right: 1%
;
padding-bottom: 1%
;
}
.list-item {
height: 500rpx
;
width: 100%
;
margin-top: 10rpx
;
}
.list-item-images {
height: 300rpx
;
width: 100%
;
position: relative
;
}
.list-item-images-img {
height: 100%
;
width: 100%
;
}
.photo {
width: 80rpx
;
height: 80rpx
;
border-radius: 50%
;
background-color: blueviolet
;
position: absolute
;
bottom: -40rpx
;
right: 50rpx
;
}
.list-item-text {
height: 200rpx
;
width: 96%
;
padding-left: 2%
;
padding-right: 2%
;
margin-top: 20rpx
;
}
.list-item-text-title {
font-size: 20px
;
color: darkslategrey
;
}
.list-item-text-content {
font-size: 10px
;
color: #999
;
margin-top: 20rpx
;
}
index.js
Page({
data
: {
background
: [
'https://s2.ax1x.com/2019/10/31/KIJWFJ.md.jpg',
'https://s2.ax1x.com/2019/10/31/KIJhWR.md.jpg',
'https://s2.ax1x.com/2019/10/31/KIJIQx.md.jpg'
],
contentItem
: [{
img
: 'https://s2.ax1x.com/2019/10/31/KIJWFJ.md.jpg',
text
: 'Simle :)'
},
{
img
: 'https://s2.ax1x.com/2019/10/31/KIJhWR.md.jpg',
text
: 'breathe :)'
},
{
img
: 'https://s2.ax1x.com/2019/10/31/KIJIQx.md.jpg',
text
: 'go slowly :)'
},
{
img
: 'https://s2.ax1x.com/2019/10/31/KIJIQx.md.jpg',
text
: 'come on :)'
}
],
image
: 'https://s2.ax1x.com/2019/10/31/KIJhWR.md.jpg',
listItem
: [{
img
: 'https://s2.ax1x.com/2019/10/31/KIJWFJ.md.jpg',
text
: 'Simle :)',
photo
: 'https://s2.ax1x.com/2019/10/31/KoxwFA.md.jpg'
},
{
img
: 'https://s2.ax1x.com/2019/10/31/KIJhWR.md.jpg',
text
: 'breathe :)',
photo
: 'https://s2.ax1x.com/2019/10/31/KoxIS0.jpg'
},
{
img
: 'https://s2.ax1x.com/2019/10/31/KIJIQx.md.jpg',
text
: 'go slowly :)',
photo
: 'https://s2.ax1x.com/2019/10/31/KTSXxx.jpg'
},
{
img
: 'https://s2.ax1x.com/2019/10/31/KIJIQx.md.jpg',
text
: 'come on :)',
photo
: 'https://s2.ax1x.com/2019/10/31/KTSxsK.jpg'
}
]
}
})
