微信小程序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;
}