微信小程序瀑布流和虚拟列表

微信小程序瀑布流和虚拟列表

虽然本篇是写的微信小程序的案例,但是也可用于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>

总结

作者:LH_S原文地址:https://segmentfault.com/a/1190000042353727

%s 个评论

要回复文章请先登录注册