前言
在日常开发过程中,经常会有双列瀑布流场景的需求出现,如商品列表、文章列表等,本文将简单介绍这种情景下如何高效、精准的实现双列瀑布流场景,支持刷新、加载更多等,实现效果如下。
开发思路
瀑布流视图有一种参差的美感,常规列表布局如 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;
}
都没有节点回收高性能在哪儿?
这个图片的宽度和高度如果接口没有返回,你前端如何计算 getImageInfo ? 性能怎么办?
有源码能分享一下吗
缓存在哪一步呢,不是很懂
这个高性能在哪
缓存那一步0.0qaq