github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

fix: scroller

pull/2930/head^2
tanjinzhou 2020-09-28 21:21:43 +08:00
parent 3844466ff2
commit 0de3e6b716
6 changed files with 9 additions and 56 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
components/vc-virtual-list/List.jsx
View File

@ -93,7 +93,7 @@ const List = {
const alignedTop = keepInRange(value); const alignedTop = keepInRange(value);
componentRef.current.scrollTop = alignedTop; componentRef.current.scrollTop = alignedTop;
return alignedTop; state.scrollTop = alignedTop;
} }
// ================================ Legacy ================================ // ================================ Legacy ================================
@ -105,7 +105,7 @@ const List = {
// diffItemRef.current = diffItem; // diffItemRef.current = diffItem;
// ================================ Height ================================ // ================================ Height ================================
const [setInstance, collectHeight, heights, updatedMark] = useHeights(getKey, null, null); const [setInstance, collectHeight, heights] = useHeights(getKey, null, null);
// ========================== Visible Calculation ========================= // ========================== Visible Calculation =========================
const calRes = computed(() => { const calRes = computed(() => {
@ -117,19 +117,16 @@ const List = {
offset: undefined, offset: undefined,
}; };
} }
let itemTop = 0; let itemTop = 0;
let startIndex; let startIndex;
let startOffset; let startOffset;
let endIndex; let endIndex;
// eslint-disable-next-line no-console
console.log('updatedMark', updatedMark);
const dataLen = state.mergedData.length; const dataLen = state.mergedData.length;
for (let i = 0; i < dataLen; i += 1) { for (let i = 0; i < dataLen; i += 1) {
const item = state.mergedData[i]; const item = state.mergedData[i];
const key = getKey(item); const key = getKey(item);
const cacheHeight = heights.get(key); const cacheHeight = heights[key];
const currentItemBottom = const currentItemBottom =
itemTop + (cacheHeight === undefined ? props.itemHeight : cacheHeight); itemTop + (cacheHeight === undefined ? props.itemHeight : cacheHeight);

2
components/vc-virtual-list/ScrollBar.jsx
View File

@ -68,7 +68,7 @@ export default {
this.thumbRef.current.addEventListener('touchstart', this.onMouseDown); this.thumbRef.current.addEventListener('touchstart', this.onMouseDown);
}, },
unmounted() { beforeUnmount() {
this.removeEvents(); this.removeEvents();
clearTimeout(this.visibleTimeout); clearTimeout(this.visibleTimeout);
}, },

23
components/vc-virtual-list/hooks/useChildren.jsx
View File

@ -1,23 +0,0 @@
import { Item } from '../Item';
export default function useChildren(
list,
startIndex,
endIndex,
setNodeRef,
renderFunc,
{ getKey },
) {
return list.slice(startIndex, endIndex + 1).map((item, index) => {
const eleIndex = startIndex + index;
const node = renderFunc(item, eleIndex, {
// style: status === 'MEASURE_START' ? { visibility: 'hidden' } : {},
});
const key = getKey(item);
return (
<Item key={key} setRef={ele => setNodeRef(item, ele)}>
{node}
</Item>
);
});
}

10
components/vc-virtual-list/hooks/useHeights.jsx
View File

@ -1,16 +1,14 @@
import { ref } from 'vue'; import { reactive, ref } from 'vue';
import { findDOMNode } from '../../_util/props-util'; import { findDOMNode } from '../../_util/props-util';
import CacheMap from '../utils/CacheMap';
export default function useHeights(getKey, onItemAdd, onItemRemove) { export default function useHeights(getKey, onItemAdd, onItemRemove) {
const instance = new Map(); const instance = new Map();
const heights = new CacheMap(); const heights = reactive({});
let updatedMark = ref(0); let updatedMark = ref(0);
let heightUpdateId = 0; let heightUpdateId = 0;
function collectHeight() { function collectHeight() {
heightUpdateId += 1; heightUpdateId += 1;
const currentId = heightUpdateId; const currentId = heightUpdateId;
Promise.resolve().then(() => { Promise.resolve().then(() => {
// Only collect when it's latest call // Only collect when it's latest call
if (currentId !== heightUpdateId) return; if (currentId !== heightUpdateId) return;
@ -19,9 +17,9 @@ export default function useHeights(getKey, onItemAdd, onItemRemove) {
if (element && element.offsetParent) { if (element && element.offsetParent) {
const htmlElement = findDOMNode(element); const htmlElement = findDOMNode(element);
const { offsetHeight } = htmlElement; const { offsetHeight } = htmlElement;
if (heights.get(key) !== offsetHeight) { if (heights[key] !== offsetHeight) {
changed = true; changed = true;
heights.set(key, htmlElement.offsetHeight); heights[key] = htmlElement.offsetHeight;
} }
} }
}); });

2
components/vc-virtual-list/hooks/useScrollTo.jsx
View File

@ -50,7 +50,7 @@ export default function useScrollTo(
for (let i = 0; i <= index; i += 1) { for (let i = 0; i <= index; i += 1) {
const key = getKey(data[i]); const key = getKey(data[i]);
itemTop = stackTop; itemTop = stackTop;
const cacheHeight = heights.get(key); const cacheHeight = heights[key];
itemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight); itemBottom = itemTop + (cacheHeight === undefined ? itemHeight : cacheHeight);
stackTop = itemBottom; stackTop = itemBottom;

19
components/vc-virtual-list/utils/CacheMap.js
View File

@ -1,19 +0,0 @@
// Firefox has low performance of map.
class CacheMap {
maps;
constructor() {
this.maps = {};
this.maps.prototype = null;
}
set(key, value) {
this.maps[key] = value;
}
get(key) {
return this.maps[key];
}
}
export default CacheMap;