HTML:
<view class="content-out" wx:for="{{awardList}}" style="top:{{item.topAward}}rpx;left:{{item.leftAward}}rpx;background-color: {{(index==indexSelect)?colorAwardSelect:colorAwardDefault}};">
<text class="text">{{item.array}}</text>
</view>
JS:
data: {
imageAward: ['1','2','3','4','5','6'],
array:[]
},
onShow:function(){
db.collection("choujiang").get({
success:res=>{
this.setData({
list:res.data[0].name1 ,
array:res.data[0].array
})
console.log(this.data.array+"数据库")
}
})
},
var awardList = [];
var topAward = 25;
var leftAward = 25;
for (var j = 0; j < 6; j++) {
if (j == 0) {
topAward = 25;
leftAward = 25;
} else if (j < 3) {
topAward = topAward;
leftAward = leftAward + 166.6666 + 15;
} else if (j < 5) {
leftAward = leftAward;
topAward = topAward + 150 + 15;
}
var imageAward = this.data.imageAward[j];
var array=this.data.array[j]
console.log(array+"循环遍历")
awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward,array: array });
}
this.setData({
awardList: awardList
})
},
异步问题
JS: data: { imageAward: ['1','2','3','4','5','6'],//后台写死的数据就可以循环遍历出效果 array:[] }, onShow:function(){ // 页面监听调用此代码 // 链接数据库 db.collection("choujiang").get({ success:res=>{ this.setData({ list:res.data[0].name1 , array:res.data[0].array }) console.log(this.data.array+"数据库")//这边是可以打印出数据库拿出来的数据的 //item设置 var awardList = []; //间距,怎么顺眼怎么设置吧. var topAward = 25; var leftAward = 25; for (var j = 0; j < 6; j++) { if (j == 0) { topAward = 25; leftAward = 25; } else if (j < 3) { topAward = topAward; //166.6666是宽.15是间距.下同 leftAward = leftAward + 166.6666 + 15; } else if (j < 5) { leftAward = leftAward; //150是高,15是间距,下同 topAward = topAward + 150 + 15; } var imageAward = this.data.imageAward[j];//如果用这个后台写死的数据的话就可以正常循环遍历并且渲染到页面上面 var array=this.data.array[j] console.log(array+"循环遍历")//这个是数据库中拿到的数组数据,打印出来就是undefined 数据库拿到的是数组数据难道不能循环遍历吗? awardList.push({ topAward: topAward, leftAward: leftAward, imageAward: imageAward,array: array }); } this.setData({ awardList: awardList }) }, } }) },
只能说基础不牢