评论

「分享」高性能双列瀑布流极简实现(附示例)❤️

介绍和分享小程序项目中高性能瀑布流的实现,附示例

前言

在日常开发过程中,经常会有双列瀑布流场景的需求出现,如商品列表、文章列表等,本文将简单介绍这种情景下如何高效、精准的实现双列瀑布流场景,支持刷新、加载更多等,实现效果如下。

开发思路

瀑布流视图有一种参差的美感,常规列表布局如 flex wrap 等由于存在行高度限制,无法让第二行的 item 对齐上一行最矮处,因此,瀑布流布局时采用双列 scrollview 的 flex 布局。

参差布局的实现,采用代码计算左右两列的高度,然后对左右两列总高度进行比较,新加入的 item 总是排在总高度较小的那列后面。

计算时可以尽可能的缓存高度,例如左右两列高度在每次计算时都缓存起来,有新的 item 加入列表时直接增加左右两列高度即可,不需要重新从头计算。

index.js

const tplWidth = (750 - 24 - 8) / 2;
const tplHeight = 595; // plWidth * 1.66

newPhotos.forEach(photo => {
  const {
    height,
    width
  } = photo

  let photoHeight = tplWidth
  if (height > width) {
    photoHeight = tplHeight
    photo.display = 'long'
  } else {
    photo.display = 'short'
  }

  if (leftHeight < rightHeight) {
    leftList.push(photo)
    leftHeight += photoHeight
  } else {
    rightList.push(photo)
    rightHeight += photoHeight
  }
})

index.wxml

<!-- list -->
<view class='list'>
  <!-- left -->
  <view class='left-list'>
    <block wx:for="{{leftList}}" wx:key="{{item._id}}">
      <cell photo="{{item}}" bindclick='onCellClicked' />
    </block>
  </view>

  <!-- right -->
  <view class='right-list'>
    <block wx:for="{{rightList}}" wx:key="{{item._id}}">
      <cell photo="{{item}}" bindclick='onCellClicked' />
    </block>
  </view>
</view>

index.css

.list {
  display: flex;
  flex: 1;
  position: relative;
  flex-direction: row;
  justify-content: space-between;
  padding-left: 12rpx;
  padding-right: 12rpx;
  padding-top: 8rpx;
}

.left-list {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 359rpx;
}

.right-list {
  display: flex;
  position: relative;
  flex-direction: column;
  width: 359rpx;
}
最后一次编辑于  2019-02-27  
点赞 5
收藏
评论

5 个评论

  • 2019-11-15

    都没有节点回收高性能在哪儿?

    2019-11-15
    赞同
    回复
  • 彼得壹激灵
    彼得壹激灵
    2019-07-19

    这个图片的宽度和高度如果接口没有返回,你前端如何计算 getImageInfo ? 性能怎么办?

    2019-07-19
    赞同
    回复
  • Deviation.
    Deviation.
    2019-04-17

    有源码能分享一下吗

    2019-04-17
    赞同
    回复
  • 远方的云
    远方的云
    2019-03-13

    缓存在哪一步呢,不是很懂

    2019-03-13
    赞同
    回复
  • 陈式坚
    陈式坚
    2019-03-01

    这个高性能在哪

    2019-03-01
    赞同
    回复 1
    • I-S
      I-S
      2019-03-02

      缓存那一步0.0qaq

      2019-03-02
      回复
登录 后发表内容