收藏
回答

动态设置swipper高度某些手机图片一致闪

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug swiper 客户端 7.0.4 2.7.1

- 在imageLoad里面拿到图片宽度和高度,以及手机屏幕宽度,动态的给swiper高度,某些机型会出现图片一直闪一直闪 ,感觉一致在重新计算图片的宽度,之前一直没有出现过这个问题,IOS12.1.4没有出现,IOS12.4出现,然后某些安卓机型也会出现


- 不会一直闪,会直接加载出来


- imageLoad里面动态给swiper高度


- 提供一个最简复现 Demo


回答关注问题邀请回答
收藏

2 个回答

  • 轻兔小程序服务商
    轻兔小程序服务商
    2019-06-19

    建议在swiper外就将图片预加载且计算好长高

    而且获取系统信息获取一次即可 不要放在imageloadL里

    2019-06-19
    有用 1
    回复
  • 是小白啊
    是小白啊
    2019-06-19

    麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2019-06-19
    有用
    回复 8
    • 爱花饼。
      爱花饼。
      2019-06-19

      imageLoad: function (e) {

      var _this = this;

      var imgWidth = (1-0.06)*wx.getSystemInfoSync().windowWidth;

      var originWidth = e.detail.width;

      var originHeight = e.detail.height;

      var imgHeight = imgWidth * originHeight / originWidth;

      _this.setData({

        height: parseInt(imgHeight)

      })


      },

      <swiper style="height: {{ height }}px;" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="{{ circular }}" bindchange="swiperchange">

      <block>

      <block wx:for="{{ banner }}" wx:key="*this">

      <swiper-item>

      <view class="swiper-item">

      <image bindload='imageLoad' src="{{ item.image }}" mode="widthFix" style="width: 100%;" ></image>

      </view>

      </swiper-item>

      </block>

      </block>

      </swiper>


      2019-06-19
      回复
    • 爱花饼。
      爱花饼。
      2019-06-19回复爱花饼。

      iphone xr 版本12.2

      2019-06-19
      回复
    • 是小白啊
      是小白啊
      2019-06-19回复爱花饼。

      代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)提供下这个格式的

      2019-06-19
      回复
    • 爱花饼。
      爱花饼。
      2019-06-19回复是小白啊

      https://developers.weixin.qq.com/s/g53P5fm5739K


      2019-06-19
      回复
    • 爱花饼。
      爱花饼。
      2019-06-19回复是小白啊

      我还想再问一下那个,微信小程序能不能拿到当前运行的环境是开发还是体验还是线上呢

      2019-06-19
      回复
    查看更多(3)
登录 后发表内容