小程序循环输出标签

.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