微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug-阿里云开发者社区

微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug

2023-10-30 371

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 微信小程序轮播图image控件图片mode属性自适应及解决图片加载闪烁bug

微信小程序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方法再设置高度，这样第一次默认高度就不会出现了。