小程式迴圈輸出標籤
.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