微信小程序图----图片排列展示
下面是我们需要实现内容的效果图
下面开始布置页面结构
<view class="content-info-list">
<view class="list-title">推荐歌曲</view>
<view class="list-inner">
<view class="list-item">
<image src="/pages/images/test.png" /> <view>紫罗兰</view>
</view>
<view class="list-item">
<image src="/pages/images/1.png" /> <view>五月之歌</view>
</view>
<view class="list-item">
<image src="/pages/images/2.png" /> <view>菩提树</view>
</view>
<view class="list-item">
<image src="/pages/images/2.png" /> <view>欢乐颂</view>
</view>
<view class="list-item">
<image src="/pages/images/1.png" /> <view>安魂曲</view>
</view>
<view class="list-item">
<image src="/pages/images/test.png" /> <view>摇篮曲</view>
</view>
</view>
</view>
下面设置样式
.content-info-list{
font-size: 11pt;
margin-bottom: 20rpx;
}
.content-info-list > .list-title{
margin: 20rpx 35rpx;
}
.content-info-list > .list-inner{
display: flex;
flex-wrap: wrap;
margin: 0 auto;
}
.content-info-list> .list-inner >.list-item{
flex: 1;
}
.content-info-list > .list-inner > .list-item > image{
display: block;
width: 200rpx;
height: 200rpx;
margin: 0 auto ;
border-radius: 10rpx;
border: 1rpx solid #555;
}
.content-info-list .list-inner >.list-item > view{
width: 200rpx;
margin: 10rpx auto;
font-size: 10pt;
}
在上面使用flex-wrap: wrap;指定元素多行显示,详情可查看flex-wrap - CSS:层叠样式表 |MDN的 (mozilla.org)
使用display:block;设置图片为块元素