想模仿淘宝的评论那样添加图片然后添加按钮向后移,利用flex布局,当添加两张向后移了,添加三张的时候刚好一行,图片都跑下去了,添加框留在上面了。
页面代码
<View className="choimgs">
{imagesList.map((item, index) => (
<View key={index} className="imgs">
<Image src={item} className="imgitem"></Image>
</View>
))}
<View className="dottdiv" onClick={this.chooseimg}>
+
</View>
css代码
.choimgs {
margin-top: 30px;
display: flex;
justify-content: space-between;
flex-wrap: wrap-reverse;
.dottdiv {
width: 200px;
height: 200px;
border: 2px dashed lightblue;
text-align: center;
line-height:200px;
font-size: 150px;
font-weight: 200;
color: #ccc;
}
.imgs {
.imgitem {
width: 200px;
height: 200px;
}
}
}
.choimgs::after {
content: "";
flex: auto;
}