想要在小程序里面做出来个人相册的效果。效果图如下:
一天中的许多照片用到了一个循环。而各个不同的日期内的内容就会又用到一个循环。但是写好多层循环之后,发现页面并不显示应该出现的效果。
仔细检查发现,最里面的一层循环item.加的位置错误应该加在block里面wx:for设置的{{}}里面。但是自己却加在了block下面的子文件里面。
wxml代码如下:
<view class='container'>
<block wx:for="{{DateAlbum}}">
<view class='date'>{{item.date}}</view>
<view class='picture'>
<block wx:for="{{item.imgUrls}}">
<image src="{{item}}" />
</block>
</view>
</block>
</view>
wxss代码:
.container {
display: flex;
flex-direction: column;
}
.date{
font-size: 30rpx;
font-weight: 400;
margin-left: 10rpx;
margin-top: 20rpx;
}
.picture {
width: 100%;
display: flex;
flex-flow: row wrap;
align-content: space-around;
}
.picture image {
width: 180rpx;
height: 180rpx;
margin-top: 15rpx;
margin-left: 6rpx;
}
js代码如下:
// pages/personal/MyAlbum/MyAlbum.js
Page({
/**
* 页面的初始数据
*/
data: {
DateAlbum:[
{
imgUrls: [
'/images/post/beijing.jpg',
'/images/post/beijing.jpg',
'/images/post/beijing.jpg',
'/images/post/beijing.jpg',
'/images/post/beijing.jpg',
'/images/post/beijing.jpg',
],
date: '2019-04-25',
},
{
imgUrls: [
'/images/post/beijing.jpg',
'/images/post/beijing.jpg',
'/images/post/beijing.jpg',
'/images/post/beijing.jpg',
'/images/post/beijing.jpg',
],
date: '2019-04-24',
}
]
},
})
一定要记得<block wx:for="{{item.imgUrls}}"> <image src="{{item}}" /> </block>
是在wx:for里面加的item.
啊。就是这个小错误,纠结了好久。