效果图:
wxml:
<swiper indicatorDots="{true}" autoplay="{true}" indicator-active-color="#00ae61">
<block wx:for="{{imgUrls}}" wx:key="*this">
<swiper-item>
<image src="{{item}}" class="slide-image"/>
<view class='swipertitle'><text>我是标题啦啦啦</text></view>
</swiper-item>
</block>
</swiper>
wxss:
.slide-image{
width: 100%;/*避免右侧留白*/
}
/*标题背景*/
.swipertitle{
position: absolute;
bottom:0;
padding: 10rpx;
background-color: rgba(34, 34, 32, 0.308);
width: 100%;
}
/*文字样式*/
.swipertitle text{
color: white;
font-size: 28rpx;
}
/*指示点位置*/
.wx-swiper-dots{
position:relative;
left: unset!important;
right: 0;
}
js:
Page({
data: {
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
]
}
})