微信applet image控件图片自适应概述我制作的轮播图，swiper标签上有默认样式width 100%； height 150px； 照片不完整。如果不加入mode图像，可能会被拉伸，导致图像损坏。
使轮播图像适应高度，不使用mode拉伸swiper.wxml
siperclass=' s wipers ' indicator-dots=' { { indicator dots } } ' autoplay=' { autoplay } } ' interval={ { interval } ' style=' height 3360 { { hei } } ' swiper-item imanager }/image//image加上mode/swiper-items wiper-itemimagesrc='//image/swiper-items wiper-itemimagesrc='/static/3.JPEG ' mode=' width fix ' bind load=' imgh ' style=' width /
data : { indicator dots : true，autoplay: true，interval: 4000，duration: 1000，Hei: '，/这是swiper动态的imgh:function(e ) { var win wid=wx.getsysteminfosync ).windowWidth； //获取当前屏幕宽度var imgh=e.detail.height图像高度var imgw=e.detail.width； varswiperh=win wid * imgh/imgw ' px ' /等比设定swiper的高度。 this.setdata(Hei:swiperh//安装高度) }，效果如图所示。
加载解决图像闪烁的错误说明。 刷新页面或单击进入页面后，图像将显示第一个效果图，然后立即成为上面的第二个效果图。 这个闪烁的瞬间，用户的体验不好。 与上述代码结合使用时，滑动首先加载默认的150px高度，然后使用image绑定加载方法(使图像高度完全可见的方法)再次设置高度，这导致闪烁。 我查了很多资料，找到了一个合理的方法。 为滑动指定类名，将高度设置为0，然后使用image绑定加载方法重新设置高度。 这样，默认高度才不会出现。
. swipers { height: 0px； }图像自适应模式详细参考