Page.prototype.setData回调函数无效?
在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);里。