小程序图片widhtFix属性加载时图片拉长

最新推荐文章于 2024-11-03 16:03:32 发布

原创最新推荐文章于 2024-11-03 16:03:32 发布 · 2.4k 阅读

0 ·

CC 4.0 BY-SA版权

js 同时被 3 个专栏收录

33 篇文章

订阅专栏

微信

5 篇文章

订阅专栏

小程序

4 篇文章

订阅专栏

本文介绍了一种使用wx.createAnimation实现图片渐显效果的方法。通过在图片加载完成后设置透明度从0到1，使得图片平滑地显示出来，提高了用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网上找的方法试了一下，还不错效果：
先将图片隐藏hidden，然后当图片加载完成bindload后再将图片渐渐显示出来，高度设为auto，这样效果还不错
1.wxml

<image hidden="{{!showPic}}" animation="{{animationData}}" style="opacity:0;height:auto" bindload="showPicture" src='{{info.img}}' mode="widthFix"></image>

2.js

showPicture: function (){
    let that = this
    let show = that.data.showPic
    let animation = wx.createAnimation({
      duration: 500,
      timingFunction: 'ease-in',
      delay: 0
    })
    show = true
    animation.opacity(1).step()
    that.setData({
      showPic: show,
      animationData: animation.export()
    })
  },