小程序编写类似微信朋友圈九宫格布局

效果图（目前数据都是自己写死的数据 到时是根据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.common.ylbyte.com/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>

目前项目有需求 我是这样写的 感觉还行吧 也可能有更好的方式~就是不知道 哈哈