公告列表
公告列表
收藏
回答

mode='widthFix' 图片太大会闪动问题

框架类型 问题类型 操作系统 工具版本
小程序 Bug macOS 最新版本

- 当前 Bug 的表现（可附上截图）

<image src='{{listArray[0].logo}}' class='wb90' mode='widthFix'></image>

logo会闪，无论是logo还是任何需要缩放的图片都会闪动！ mode='widthFix'不加也一样


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


<image src='{{listArray[0].logo}}' class='wb90' mode='widthFix'></image>
回答关注问题邀请回答
收藏

5 个回答

  • 阿 龙
    阿 龙
    2018-08-31

    你试一下添加  lazy-load='{{true}}'  然后再把图片的高度设置为0，在wxss中


    2018-08-31
    有用 5
    回复 1
    • 刘时满
      刘时满
      2020-01-10
      此乃正解
      2020-01-10
      赞
      回复
  • 魏庆臣
    魏庆臣
    2019-05-30

    其实就是自适应高低问题。我有以下几点建议可供参考。

    1. 可预知最后高度，可以在外层设计一个div结局布局overflow:hidden;(最low)

    2. 替换原理给给一个默认的然后设置动态替换给个过度动画我就不信你还能看到高度变化

    3. 我自己曾经也遇到   我是这样解决的    瞬间感觉世界对我如此友好。。。。。

    2019-05-30
    有用
    回复 1
    • Administrator
      Administrator
      2019-07-31
      感谢，已设置明确的固定高宽解决这个问题了
      2019-07-31
      赞
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-08-30

    麻烦给个相关的代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html），我们定位下问题

    2018-08-30
    有用
    回复 3
    • Administrator
      Administrator
      2018-08-30

      <image src='../../img/uploadfile.png' class='w100 h100 fadein' mode='widthFix'></image>


      图片是390*390的，是一个列表，有很多图，目前的问题是无论如何设置，都无法解决闪动的问题。


      你们应该自己先模拟测试一下这个问题。


      问题大致是390的图片缩放时，会快速闪动一下，譬如宽度设置为100，高度会从390缩到100的过程出现闪动，也许就几十毫秒，但是能明显看到闪动。


      如果不用mode='widthFix'则图片不会自动保持正常比例。


      首先你们的工程师要确定这绝对不是我们所写的代码、或实现方式的问题。


      另外个人认为这个问题是很容易解决的，希望下个版本能够修复一下，当然不修复也没有关系，但是问题会持续存在，开发会很麻烦，我想很多人都有这样的问题，十分感谢！


      2018-08-30
      赞 1
      回复
    • Administrator
      Administrator
      2018-08-30回复Administrator

      <!--index.wxml-->

      <table class='hb100'>

      <tr>

      <td class='t-c v-m hb50'>

      <block wx:if="{{!login}}">

      <image src='../../img/logo.png' class='wb30 fadein' mode='widthFix'></image>

      <div>

      <image src='../../img/logo_str.png' class='wb69 fadein' mode='widthFix'></image>

      </div>

      </block>

      <block wx:if="{{login}}">

      <div class='m-t20b'>

      <image src='{{userIcon}}'

      class='w80 h80 br-dot userIcon fadein line-d linec-f2 bs-b-2501' mode='widthFix'></image>

      <div class='m-t10'>{{userNick}}</div>

      </div>

      </block>

      </td>

      </tr>

      <tr>

      <td class='v-b t-c'>

      <block wx:if="{{!login}}">

      <div class='t-c m-t20 fadein'>

      <button size='mini' open-type='getUserInfo' disabled='{{buttonDisabled}}'

      class='w-auto bc-eee tc-666 bs-b-2501' bindtap='login'>{{buttonStr}}</button>

      </div>

      </block>

      <block wx:if="{{login}}">

      <image src='../../img/index_bottom_str.png' class='wb50 fadein' mode='widthFix'></image>

      </block>

      </td>

      </tr>

      <tr>

      <td>

      <div class='t-c fz12 tc-ccc fadein'>© xxx v1.0</div>

      </td>

      </tr>

      </table>


      2018-08-30
      赞
      回复
    • 疯狂的小辣椒
      疯狂的小辣椒
      2018-08-30回复Administrator

      麻烦按照教程来提供下代码片段（https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html）。谢谢

      2018-08-30
      赞
      回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-08-30

    你好，麻烦提供下你的图片链接

    2018-08-30
    有用
    回复
  • Administrator
    Administrator
    2018-08-29

    这种bug解决起来应该是很简单的，很明显的需要计算图片缩放后的大小和位置，希望小程序官方能解决一下这个问题，毕竟这是视觉效果，细节问题才是大问题。

    2018-08-29
    有用
    回复 14
    查看更多(9)
请 登录 后发表内容
相关问题
相关文档