starkwang / vue-virtual-collection Goto Github PK

@fisker Is it possible to use vue-virtual-collection to generate tables?

原因是 原生 scrollTop 计算滚动 重新渲染 displayItems 的时机 没有与 vue 渲染时机相对应，导致了渲染延迟，出现了（白屏）

目前的解决方案是结合 better-scroll 的滚动插件----原因是 better-scroll 把原生滚动封装的比较好 对于移动端和PC滚动算是不错的选择

只需要修改 源码中 flushDisplayItems() 方法即可
一下是我结合 better-scroll 的代码

<template>
    <div class="vue-virtual-collection" :style="outerStyle" ref="outer">
        //  使用 better-scroll 封装的一个滚动骨架组件
        <vertical-scroll :listenScroll="true"
                         :probeType="3"
                         :bounce="false"
                         @scroll="verticalScroll">
            <div class="vue-virtual-collection-container" :style="containerStyle">
                <div class="cell-container" v-for="(item, index) in displayItems"
                     :key="item.index"
                     :style="getComputedStyle(item, index)" ref="cellContainer">
                    <slot name="cell" :data="item"></slot>
                </div>
            </div>
        </vertical-scroll>
    </div>
</template>

<script type="text/ecmascript-6">
    import VerticalScroll from "base/VerticalScroll";

    export default {
        methods: {     
            init () {
                // 设置当前视图我们中应该显示那些块
                this.flushDisplayItems(0, 0);
            },
            // 获取到视图应该渲染那些块之外我们还需要设置这些块所应该在的位置
            getComputedStyle (displayItem) {
                if (!displayItem) {
                    return;
                }

                const {width, height, x, y} = this._sectionManager.getCellMetadata(displayItem.index);

                return {
                    transform: `translate3d(${x}px, ${y}px, 0)`,
                    width: `${width}px`,
                    height: `${height}px`
                }
            },
            // 设置当前视图我们中应该显示那些块
            flushDisplayItems (x, y) {
                let scrollLeft = x;
                let scrollTop = Math.abs(y);

                // 然后这里我们需要去设置当前视图中应该渲染那些块
                // 于是我们要在 SectionManager类中定义一个方法去获取需要渲染的那个块的索引
                let indices = this._sectionManager.getCellIndices({
                    height: this.height,
                    width: this.width,
                    x: scrollLeft,
                    y: scrollTop
                });

                // 到这里我们已经获取到了索引了,然后我们就可以去渲染该视图所对应的块了
                const displayItems = [];

                indices.forEach(index => {
                    displayItems.push({
                        index,
                        ...this.collection[index]
                    })
                });

                // 重新渲染数据
                this.displayItems = displayItems;
            },
            // 滚动骨架组件监听滚动的方法-垂直滚动
            verticalScroll (pos) {
                this.flushDisplayItems(pos.x, pos.y)
            }
        },
        components: {
            VerticalScroll
        }
    }
</script>

<style lang="stylus">

    .vue-virtual-collection {
        overflow: hidden;
        -webkit-overflow-scrolling: touch;
        height: 100%;
        width: 100%
    }

    .vue-virtual-collection-container {
        position: relative;
        overflow: hidden;
    }

    .cell-container {
        position: absolute;
        top: 0;
        overflow: hidden;
    }

</style>

滚动骨架组件制作详情请参考这里

I don't think this library need to be use via vue plugin. I think exporting the VirtualCollection is enough

在判断ResizeObserver的时候 就出错了

点击滚动内容，按 PageDown 只第一次有效

mounted() {
if (ResizeObserver) {
this.resizeObserver = new ResizeObserver(this.handleResize)
this.resizeObserver.observe(this.$refs.outer)
} else {
this.$refs.outer.addEventListener('resize', this.handleResize)
}
},

这个可以支持自适应吗?

I would like to implement an infinite scroll ui with this library. And would like to know how can I know it's time to trigger another fetch. I seem there are no callback for this use case.

I'm trying to make a grid that dynamically adds and removes items from a vue virtual collection based on how the user scrolls. However, when I remove items from the collection, I get errors like this:

TypeError: Cannot read property 'width' of undefined
    at VueComponent.getComputedStyle (C:\Users\<me>\Documents\VSCode\atm-prototype\node_modules\vue-virtual-collection\dist\index.js:218:47)

This is because in the instances that items get removed from the collection, getComputedStyle ends up getting passed displayItems whose index is beyond the bounds of the cellSizeAndPosition array:

Unless there's something I'm doing wrong that I could fix on my end, I guess this could be resolved by just adding a check in getComputedStyle:

if (!displayItem) return
- const { width, height, x, y } = this._sectionManager.getCellMetadata(displayItem.index)
+ const cell = this._sectionManager.getCellMetadata(displayItem.index)
+ if (!cell) return
+ const { width, height, x, y } = cell

 computed: {
        cellSizeAndPosition() {
            return this.collection.map((item, index) => this.cellSizeAndPositionGetter(item, index))
        }
}

此处的 cellSizeAndPosition方法是否可以用 this._sectionManager._cellMetadata[displayItem.index]去代替一下呢,其实 cellSizeAndPosition的本质是与 this._sectionManager._cellMetadata[displayItem.index]相同的,是否能减少一些代码量呢

Didn't find option to render in pagemode, does it exist?

This component seems to be restricted to placing the content within a container within the main window.

I am trying to achieve a virtual scroll affect similar to Pinterest where the window scrolls and not the containing box.

Using this component, when setting the container to be large enough to house all the components this directly affects the items rendered.. eg setting the count to 1000, the column count to 8 but the overall container height 30000 results in the browser just rendering all the components within the 30k px window height, which is all 1000 items.

Is there a way to achieve this with vue-virtual-collection @starkwang ?

I have a very large virtual map to display (N> Number.MAX_SAFE_INTEGER), will this lib support for index of BigInt?

The title basically....

解决这似乎有些尴尬的情况

Does vue-virtual-collection support horizontal scrolling?

移动端一般两列布局，我发现你的demo: With 100 data in 2 columns，最后几个位置排列不对。

是否此组件不适合移动端？

Right now, width changes don't trigger relayout. So this library can't be used in responsive design.

I was wondering if vue-virtual-collection works like vue-virtual-scroller? Are the performances the same?

你好，是这样子的，我用你的这个组件写了个商品列表，每行4列，每个项目里面有一张图片，还有一些文本，每个商品项目尺寸大概是220pxX400px，当我放进2000个左右商品的时候，滑起来的体验不是很好，很容易白屏，我在想是不是调整成transform:translate3d来控制滑动是不是会有所改善？

滑动效果很好，在子集高度未知的情况下还能否达到预期的效果吗

I love this library. Are there any plans to support Nuxt.js? This is very necessary so that pages using vue-virtual-collection can have good SEO.

• I have a bunch of items whose heights is not known
• It is a list of items loaded from AJAX call where each item may have a different height
• how does this library handle this?