Page.prototype.setData回调函数无效?
发布于 5 年前 作者 pyu 5371 次浏览 来自 问答

在A页面中拍摄照片,在B页面js中使用wx.getStorage获取该照片并设置为当前页面<image>中的src,根据业务需求__需要获取此时<image>的width和height__。

<image>中src是通过Page.prototype.setData(Object data, Function callback)设置的,官方给出说明该回调函数是setData引起的界面更新渲染完毕后的回调函数:

根据该说法我应该能够获取图片长宽,但实际获取到的是image组件的默认宽度320px、高度240px?

其他说明:

1、image使用了widthFix缩放模式方式设定为宽度不变,高度自动变化,保持原图宽高比不变;

2、图片小于1024KB。

主要代码:

1、B.wxml

<image mode="widthFix" src="{{src}}" id="img"></image>

2、B.js

Page({
  data: {
    src: ''
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    let that = this;

    // 获取全局缓存中预览图,并设置src
    wx.getStorage({
      key: 'ConfirmImage',
      success(res) {
        that.setData({
          src: res.data,
        }, () => {
          that.getImageWH;
        });
      }
    })
  },
    
  /**
   * 获取image长宽
   */
    getImageWH() {
    const query = wx.createSelectorQuery();
    query.select('#img')
      .fields({
        size: true,
        rect: true,
      })
      .exec((res) => {
        console.log("img长宽", res[0].width, res[0].height); // 这里返回image组件的默认宽度320px、高度240px
      });
  },
})

暂时解决方案是将getImageWH方法包装到setTimeout(that.getImageWH, 500);里。

回到顶部