css3 使用flex布局后遗症

因为在一个小程序中开发,采用的都是

display: flex;

justify-content: space-between;

/* 自动换行 */

flex-wrap: wrap;

但是如果最后的数单个是没问题 ;如果只有两个的话;中间就会空出来一个,如果采用css3的justify-content: flex-start 方法;

那么他右边会空也来多一点;所以只能用js控制这种情况,

js; 因为数据都是请求过来的,所以直接在请求中修改:

    let count = params.count ? params.count : 7;
    wx.request({
      url: url,
      data: {
        count: count
      },
      success(res) {
        let items = res.data.subject_collection_items;
        // 解决页面只有两条数据,出现左右显示的情况,
        let itemsCount = items.length;
        let left = itemsCount %3;
        if (left === 2){
           items.push(null)
        }
        if (params && params.success) params.success(items)
        wx.hideLoading()
      }
    });

修改完后会看到还有一个小小的问题 ;就是星星还在;

css3 使用flex布局后遗症

去到wxml页面解决用wx:if判断有没有值,如果没有,就加入一个空的标签,为了样式一致,class也要加入

<!-- 这里相当于一个连接,这里展示的数据来自己父级indexModule所传的item对象, -->
<navigator class='item-navigator' wx:if="{{item}}">
  <view class='item-group'>
    <view class='thumbnail-group'>
      <image class='thumbnail' src='{{item.cover.url}}'></image>
    </view>
    <text class="movie-text">{{item.title}}</text>
    <view>
      <stars rate="{{item.rating.value}}" fontSize="20" fontColor="#0B68B1" starSize="28" />
    </view>
  </view>
</navigator>
<view wx:else class="item-navigator"></view>

css3 使用flex布局后遗症