小程序瀑布流无限加载
由于想做成瀑布流,故一开始使用如下的方式:
.waterfall-container { column-count: 2; column-gap: 30rpx; }
但是,由于这种 column-count:2 ,是由上往下排的,所以再加载新的一页的时候,原来在页首的会被顶到底部,导致整个逻辑是错误的。
故,需要修改一下页面的实现思路
1. 在页首加入预加载的图片的不显示的块,加载图片时,会触发事件,
2. 在事件处理 function 中,进行图片的分发,根据当前的两列的实际高度,分发到两列中。
具体实现:
在页首加上 display: none 的块,用于预加载图片。
<view style="display:none"> <image wx:for="{{prefetch_products.rows}}" data-id="{{item.id}}" data-image-src="{{item.cover}}" wx:for-item="item" src="{{item.cover}}" bindload="onImageLoad"></image> </view>
JS:
onImageLoad: function (e) { var oriHeight = e.detail.height, oriWidth = e.detail.width, scale = oriHeight / oriWidth, destWidth = this.data.imageWidthRpx * rpxScale, // 在不同机型中的具体图片宽度 destHeight = scale * destWidth, id = e.currentTarget.dataset.id, src = e.currentTarget.dataset.imageSrc; // 分发到两边 var col1 = this.data.col1, col2 = this.data.col2, loadingCount = this.data.loadingCount; // 比较两边的height // 哪个矮分发到哪个 if (col1.height <= col2.height) { col1.images.push({ id: id, src: src }); col1.height += (destHeight + 39 * rpxScale); // 补偿 padding 的高度 --loadingCount; } else { col2.images.push({ id: id, src: src }); col2.height += (destHeight + 39 * rpxScale); // 补偿 padding 的高度 --loadingCount; } if (!loadingCount) { this.setData({ prefetch_products: [] }); } this.setData({ loadingCount: loadingCount, col1: col1, col2: col2 }); }