请教，小程序动态创建view，怎么给这些添加的view设置不同的top/left值？

Question

问题描述

应用场景：
1.动态生成view
2.让这些view随机分布在页面上

现在需要动态生成view组件，同时让这些view随机分布在页面上，所以需要生成的同时给这些view设置不同的top、left值

相关代码

wxml:
<view wx:for='{{array}}' wx:key='' class="pops" style="top:{{top}}rpx;left:{{left}}rpx">
js:

data:{
array: [],
top: '',
left: '',
}

事件：

    var pop_array = this.data.array;
    pop_array.push(1);
    var row = Math.floor(Math.random() * showHeight);
    var col = Math.floor(Math.random() * showWidth);
    this.setData({
      array: pop_array,
      top: row,
      left: col,
    });

求教

我这样写添加的view都会随机到同一个位置，知道是错的，想知道问题出在哪里，怎样分别设置坐标？求教，感谢！

Answer 1

data:{
    array: []
}

var pop_array = this.data.array;
var pop_arrayItem = {
    row : Math.floor(Math.random() * showHeight),
    col : Math.floor(Math.random() * showWidth)
}
pop_array.push(pop_arrayItem);
this.setData({
    array: pop_array,
});

这样子的吧 每一个view都要有它自己的top和left

<view wx:for='{{array}}' wx:key='' class="pops" style="top:{{item.top}}rpx;left:{{item.left}}rpx">

Answer 2

你这 top 和 left 每次都覆盖前面的值了啊，值都一样，肯定是同一个啊。

这俩属性难道不应该是 array 里每个元素的属性？怎么能跟 array 平级呢？