微信小程序的轮播图也是十分的方便,我们可以直接调用,不用自己再写多余的逻辑了,这样也极大的方便了我们的开发,在使用过程中,小编发现原生的小程序无法满足需求了,小编想在图片下方添加行文字,但是原生的轮播图无法满足小编的基本需求了。所以小编自己进行了部分修改,一起来看下。
先来看下效果图:
实现代码:
<swiper indicator-dots="{{true}}" style="height: 200px;">
<block wx:for="{{covers || []}}">
<swiper-item>
<image src="{{item}}" class="slide-image" style="width: 100%; height: 100%;" mode="aspectFill" bindtap="onImageClick" data-images="{{covers || []}}" data-index="{{index}}" />
<!-- 关键代码 -->
<view style="font-size: 18px;width:{{width}}px;padding:10rpx; color: black; font-weight: 800; padding: 2px 0;background:rgba(0,0,0,0.4);position: absolute;bottom:0;left:0%;transform:translateX(0%);text-align:left;">
<text style="color:#FFFFFF;padding-left:30rpx;">{{product.name}}</text>
</view>
</swiper-item>
</block>
</swiper>
One comment
谢谢前辈