微信小程序幻灯的swiper标签宽和高度自适应

本文提供微信小程序中实现swiper标签宽度和高度自动适应的代码实践,旨在解决幻灯组件在不同屏幕尺寸下适配的问题。
摘要由CSDN通过智能技术生成

本方案解决微信小程序幻灯的swiper标签宽和高度自适应方案,费话少说直接上代码:

.wxhl中的代码:

<swiper indicator-dots='true' indicator-color='rgba(0,0,0,0.3)' indicator-active-color='#04997C' autoplay='true' interval='5000' class='banner' style='height:{
  {bannerHeight}}px'>
<block wx:for="{
  {imgUrls}}">
    <swiper-item>
      <image src="{
  {item}}" class="slide-image" mode='{
  {mod[1]}}' bindload='imageLoad'></image>
    </swiper-item>
  </block>
</swiper>

css代码:

.banner{ width: 100%; height: auto; display: block;}
.slide-image{ width: 100%; display: block;}

js代码:

data: {
    i
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值