微信小程序瀑布流和虚构列表
尽管本篇是写的微信小程序的案例，然而也可用于H5，思路是想通的，只是有些api的差别，最初会贴代码片段
虚构列表
- 个别在做长列表优化时，特地是面试时，虚构列表就是个高频词。这个名词听起来很高级，其实原理很简略
- 虚构列表就是将须要渲染的数组数据革新成二维数组，而后通过监听DOM节点在适合的中央切换为占位元素，达到长列表有限滚动时缩小DOM渲染的优化
-
JS
/** * 解决占位元素，就是在获取新的数据后 * 通过SelectQuery获取以后数据的理论高度，而后把这个高度设置到占位元素上 */ getCurrentItemHeight() { const query = this.createSelectorQuery(); const { virtualId } = this.data query.select(`#${virtualId}`).boundingClientRect() query.exec((res) => { this.setData({ height: res[0].height }, this.observePage()) }) } /** * 监听元素与页面的相交 * 能够抉择指定元素为参照区域，也能够抉择页面为参照元素，只是API不同 * @doc https://developers.weixin.qq.com/miniprogram/dev/api/wxml/IntersectionObserver.html */ observePage() { const { virtualId, observeDistance, wrapId } = this.data let IntersectionObserver = wx.createIntersectionObserver(this); (wrapId ? IntersectionObserver.relativeTo(`#${wrapId}`) : IntersectionObserver.relativeToViewport({ top: observeDistance, bottom: observeDistance })) .observe(`#${virtualId}`, ({ intersectionRatio }) => { this.setData({ isShow: intersectionRatio > 0, }) }) } -
WXML
<view id="{{virtualId}}"> <block wx:if="{{isShow}}"> <slot></slot> </block> <view wx:else style="height: {{ height }}px"></view> </view>
瀑布流
- 瀑布流，又称瀑布流式布局。视觉体现为参差不齐的多栏布局，随着页面滚动条向下滚动，这种布局还会一直加载数据块并附加至以后尾部
-
瀑布流有多种写法，有通过纯CSS实现的，也有借助JS实现的，办法很多，然而我为了接下来能与虚构列表相结合，就采纳JS的写法，就是通过列数把每一列分为一个独自的子元素，而后会记录每一列的高度，通过判断哪一列高度最小，而后将数据push到高度最小的那一列
/** * 获取列表数据 * @describe 瀑布流解决，哪列高度小，就往哪列push新数据 */ getList() { let { listQuery: { pageIndex, pageSize }, columns, columnsHeight } = this.data; for (let i = 0; i < pageSize; i++) { const height = Math.floor(Math.random() * 100) const item = { height: height < 150 ? height + 150 : height, }; const position = this.computePosition(columnsHeight) columns[position].push(item) columnsHeight += item.height } // 在html中双重遍历columns，而后通过flex：1均匀分布 this.setData({ columns, }) this.data.columnsHeight = columnsHeight } /** * 获取高度最小列下标 */ computePosition(heights) { const min = Math.min(...heights); return heights.findIndex((item) => item === min) }
瀑布流联合虚构列表
- 让瀑布流有虚构滚动的能力，思路很简略，就是计算每列的偏移量，因为瀑布流被咱们分成了二维数组，所以每块子元素之间就会因为列高度的不统一产生空白区域，所以须要计算这个空白区域的大小，而后通过
margin-top挪动列元素达到视觉上的瀑布流连接成果
getList() {
let { listQuery: { pageIndex }, column, columnsHeights } = this.data;
const columns = [];
// 上一组的高度数据，用于计算偏移值
const lastHeights = [...columnsHeights];
// 获取数据
const list = this.getListData();
// 初始化以后屏数据
for (let i = 0; i < column; i++ ) {
columns.push([]);
}
// 遍历新数据，调配至各列
for (let i = 0; i < list.length; i++) {
const position = this.computePosition(columnsHeights);
columns[position].push(list[i]);
columnsHeights[position] += Number(list[i].height);
}
this.setData({
[`listData[${pageIndex}]`]: {
columns,
columnOffset: this.computeOffset(lastHeights),
}
});
this.data.listQuery.pageIndex = pageIndex + 1;
this.data.columnsHeights = columnsHeights;
},
/**
* 获取列表数据
*/
getListData() {
const result = []
for (let i = 0; i < this.data.listQuery.pageSize; i++) {
const height = Math.floor(Math.random() * 300);
const item = {
height: height < 150 ? height + 150 : height,
color: this.randomRgbColor(),
};
result.push(item);
}
return result;
},
/**
* 随机生成RGB色彩
*/
randomRgbColor() {
var r = Math.floor(Math.random() * 256); //随机生成256以内r值
var g = Math.floor(Math.random() * 256); //随机生成256以内g值
var b = Math.floor(Math.random() * 256); //随机生成256以内b值
return `rgb(${r},${g},${b})`; //返回rgb(r,g,b)格局色彩
},
/**
* 获取最小高度列下标
*/
computePosition(heights) {
const min = Math.min(...heights);
return heights.findIndex((item) => item === min);
},
/**
* 计算偏移量
*/
computeOffset(heights) {
const max = Math.max(...heights);
return heights.map((item) => max - item);
},
onScrollLower() {
this.getList();
}-
WXML
<view> <scroll-view class="virtualScrollView" eventhandle scroll-y bindscrolltolower="onScrollLower"> <block wx:for="{{ listData }}" wx:key="screenIndex" wx:for-index="screenIndex" wx:for-item="screenItem"> <VirtualItem virtualId="virtual_{{screenIndex}}"> <view class="virtualScreen"> <block wx:for="{{ screenItem.columns }}" wx:key="columnIndex" wx:for-index="columnIndex" wx:for-item="column" > <view style="margin-top: -{{screenItem.columnOffset[columnIndex]}}px;" class="virtualColumn"> <view wx:for="{{column}}" style="height: {{ item.height }}px; background-color: {{ item.color }};" wx:key="index" wx:for-item="item" wx:for-index="index"> screen: {{ screenIndex }}, column: {{ columnIndex }} </view> </view> </block> </view> </VirtualItem> </block> </scroll-view> </view>
总结
- 代码片段：https://developers.weixin.qq….
发表回复