微信小程序的轮播图也是十分的方便,我们可以直接调用,不用自己再写多余的逻辑了,这样也极大的方便了我们的开发,在使用过程中,小编发现原生的小程序无法满足需求了,小编想在图片下方添加行文字,但是原生的轮播图无法满足小编的基本需求了。所以小编自己进行了部分修改,一起来看下。
先来看下效果图:
lbt.png
实现代码:

 <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>
Last modification:October 14, 2019
If you think my article is useful to you, please feel free to appreciate