.wxml
<view class="classname" wx:for="{{array}}">
<!-- 设置位置style="transform:translate({{item.offsetX}}px, {{item.offsetY}}px) ;" -->
<image class='img' style="transform:translate({{item.offsetX}}px, {{item.offsetY}}px) ;" src="../image/asc.jpg" ></image>
</view>
////////////////////////
.js
//index.js
//获取应用实例
const app = getApp()
var arr = new Array();
var location1 = {
offsetX: 10,
offsetY: 10,
}
var location2 = {
offsetX: 10,
offsetY: 10,
}
var location3 = {
offsetX: 10,
offsetY: 10,
}
arr.push(location1);
arr.push(location2);
arr.push(location3);
Page({
data: {
array: arr,
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
},
})
///////////////////////////
.wxss
.img
{
width: 50px;
height: 50px;
}
////////////////////
效果图:
结合案例使用:https://download.csdn.net/download/weixin_42401291/10774349