微信小程序image控件图片自适应
简述
我是做的轮播图，swiper标签存在默认样式 width 100% ；height 150px；这就会造成图片不完整的情况；而不加mode图片可能会被拉伸，造成图片损坏。
让轮播图自适应高度并且使用mode不拉伸
swiper.wxml
<swiper class="swipers" indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" circular="{{true}}" style='height:{{Hei}}' > <swiper-item> <image src='/static/1.jpeg' mode="widthFix" bindload='imgH' style="width:100%;"></image> // image加mode </swiper-item> <swiper-item> <image src='/static/2.jpeg' mode="widthFix" bindload='imgH' style="width:100%;"></image> </swiper-item> <swiper-item> <image src='/static/3.jpeg' mode="widthFix" bindload='imgH' style="width:100%;"></image> </swiper-item> </swiper>
swiper.js
data: { indicatorDots: true, autoplay: true, interval: 4000, duration: 1000, Hei: "", //这是swiper要动态设置的高度属性 navH: 0, share: '' }, imgH:function(e){ var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度 var imgh=e.detail.height; //图片高度 var imgw=e.detail.width; var swiperH=winWid*imgh/imgw + "px" //等比设置swiper的高度。 this.setData({ Hei:swiperH //设置高度 }) },
效果如图：
解决加载图片闪烁的bug
描述：刷新页面，或者点击进入页面，图片就先显示上面第一个效果图，然后快速变为上面第二个效果图，这个闪烁的瞬间，用户体验很不好。结合上面代码，原因就是swiper先加载了它默认的150px的高度，然后通过image的bindload方法(让图片高度完整显示的方法)又设置了一次高度，这就造成了闪烁。查了很多资料，找到一个比较合理的方法，就是给swiper加一个类名，设置高度为0，然后通过image的bindload方法再设置高度，这样第一次默认高度就不会出现了。
.swipers { height: 0px; }
