收藏
回答

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

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

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


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


- imageLoad里面动态给swiper高度


- 提供一个最简复现 Demo


最后一次编辑于  06-19  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

2 个回答

  • 是柿子啊
    是柿子啊
    06-19

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

    06-19
    赞同
    回复 8
    • 爱花饼。
      爱花饼。
      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>


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

      iphone xr 版本12.2

      06-19
      回复
    • 是柿子啊
      是柿子啊
      06-19回复爱花饼。

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

      06-19
      回复
    • 爱花饼。
      爱花饼。
      06-19回复是柿子啊

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


      06-19
      回复
    • 爱花饼。
      爱花饼。
      06-19回复是柿子啊

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

      06-19
      回复
    查看更多(3)
  • 彩云衣内容电商平台
    彩云衣内容电商平台
    06-19

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

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

    06-19
    赞同 1
    回复