效果图(目前数据都是自己写死的数据 到时是根据api返回显示的)
总共分为 1张图 2张图 4张图 9张图 然后进行对应的样式布局
代码:
根据返回的数组长度进行判断 显示对应布局 例如 arr.length为9,那么就应该显示9宫格盒子布局 其它盒子不显示
<view class="picture_box"><!-- 单张图片 --><view class="picture_list" wx:if="{{picturelist.length<2}}"><!-- 单张图片展示 --><image mode="scaleToFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"data-index="{{index}}"></image><!-- 单个视频展示 --><!-- <video src="http://static./video/1.mp4"></video> --></view><!-- 2张图片 --><view class="picture_list_two" wx:if="{{picturelist.length>1 && picturelist.length<3}}"><image mode="scaleToFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"data-index="{{index}}"></image></view><!-- 4张图片 --><view class="picture_list_four" wx:if="{{picturelist.length>3 && picturelist.length<5}}"><image mode="scaleToFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"data-index="{{index}}"></image></view><!-- 多张图片 --><view class="picture_list_N" wx:if="{{picturelist.length>5}}"><image mode="aspectFill" wx:for="{{picturelist}}" wx:key="index" src="{{item}}" bindtap="pictureclick"data-index="{{index}}"></image></view></view>