[微信小程序]根据图片宽高动态改变swiper(轮播图)组件宽高

来源：互联网发布：淘宝模特摄影师编辑：程序博客网时间：2024/06/06 02:29

欢迎大家加入微信小程序开发交流qq群(173683895).

我把 swiper 的 width 设定成了屏幕的95%宽度, 如果想宽度也自适应的话请改成 width:{{width*2}}rpx

    <swiper class='advertising2' indicator-dots="true" style='height:{{height*2 +80}}rpx;width:95%;' autoplay="true" interval="4000" duration="1000">      <swiper-item wx:for="{{advertising2}}" wx:key="">            <view class='store'>{{item.title}}</view>   <!-- store的高度加内外边距为80rpx,所以在swiper的高度加上80rpx -->            <view>              <image style='height:{{height*2}}rpx;width:100%;' mode="" src="{{item.image}}" />            </view>      </swiper-item>    </swiper>

wx.getImageInfo是官方获取图片信息的api , 详细文档请查看 https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html#wxgetimageinfoobject

      wx.getImageInfo({        src: advertising2[0].image,        success: function (res) {          that.setData({            height: res.height,            width:res.width          })        }      })

效果图如下:

阅读全文

0 0