收藏
回答

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

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

- 当前 Bug 的表现(可附上截图)

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

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


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


最后一次编辑于  2018-08-29  (未经腾讯允许,不得转载)
邀请回答
复制链接收藏关注问题回答

22 个回答

  • aLong¹²³
    aLong¹²³
    2018-08-31

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


    2018-08-31
    赞同 11
    回复
  • 此号已不用
    此号已不用
    2018-08-29

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

    2018-08-29
    赞同
    回复 14
    查看更多(9)
  • 娇华
    娇华
    2018-08-30

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

    2018-08-30
    赞同
    回复 3
    • 此号已不用
      此号已不用
      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
      赞同 11
      回复
    • 此号已不用
      此号已不用
      2018-08-30回复此号已不用

      <!--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回复此号已不用

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

      2018-08-30
      赞同
      回复
  • for(me:time)love.you;
    for(me:time)love.you;
    05-30

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

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

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

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

    05-30
    赞同
    回复 1
    • 此号已不用
      此号已不用
      07-31
      感谢,已设置明确的固定高宽解决这个问题了
      07-31
      赞同
      回复