我定义一个指定长度的空数组displayImgData,页面使用wx:for="{{displayImgData}}"渲染。从后台请求数据,如果请求到的图片是第一张,就把这个图片放到页面的第一个位置,以此类推。代码如下:
that.data.displayImgData.find((item, index) => {
if ((index + 1) == res.data.data.currentNumber) {
that.setData({
['displayImgData[' + index + '].src']: res.data.data.file,
['displayImgData[' + index + '].number']: res.data.data.currentNumber,
})
}
})
console.log('displayImgData===', that.data.displayImgData)
结果是页面显示正常,但是打印出来的displayImgData只有最后取得的图片有值,其余都是空的,截图如下:
这是什么原因?
是我搞错了,打印出来不是空数组。但是也有问题,当图片全部已经渲染到页面后,打印数组后发现,数组中的每一项都是最后一个图片的信息。
你好,可以参考下
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Array/find
是不是数据处理错了?麻烦再核实下。
处理:当第一次取到图片总数的时候,会创建一个长度为图片总数的数组,用来存放图片并渲染到页面,当取到第二张图片的时候,就在页面把数组中第二个位置的图片渲染上去,依次类推。
问题是:页面渲染没有问题,图片是按照位置渲染上去了,但是在打印页面上用来渲染的数组的时候,发现数组中的每一项都是最后一个请求到的图片的信息,这是为什么?