blackteay/vant
1
0
Fork 0
mirror of https://gitee.com/vant-contrib/vant.git synced 2025-04-06 03:57:59 +08:00
Code Issues Projects Releases Wiki Activity

feat: add useScroller

Browse Source
This commit is contained in:
chenjiahan 2020-08-28 11:52:16 +08:00
parent 7fd4e3eabb
commit 0a701e549c
3 changed files with 25 additions and 17 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/composition/use-scroller.ts Normal file
View File

@ -0,0 +1,14 @@
import { Ref, ref, onMounted } from 'vue';
import { getScroller } from '../utils/dom/scroll';
export function useScroller(el: Ref<HTMLElement>) {
const scrollerRef = ref();
onMounted(() => {
if (el.value) {
scrollerRef.value = getScroller(el.value);
}
});
return scrollerRef;
}

15
src/list/index.js
View File

@ -10,10 +10,10 @@ import {
// Utils
import { createNamespace } from '../utils';
import { isHidden } from '../utils/dom/style';
import { getScroller } from '../utils/dom/scroll';
// Composition
import { useRect } from '../composition/use-rect';
import { useScroller } from '../composition/use-scroller';
import { useGlobalEvent } from '../composition/use-global-event';
// Components
@ -49,8 +49,8 @@ export default createComponent({
// use sync innerLoading state to avoid repeated loading in some edge cases
const loading = ref(false);
const rootRef = ref();
const scrollerRef = ref();
const placeholderRef = ref();
const scroller = useScroller(rootRef);
const check = () => {
nextTick(() => {
@ -58,16 +58,15 @@ export default createComponent({
return;
}
const scroller = scrollerRef.value;
const { offset, direction } = props;
let scrollerRect;
if (scroller.getBoundingClientRect) {
scrollerRect = scroller.getBoundingClientRect();
if (scroller.value.getBoundingClientRect) {
scrollerRect = scroller.value.getBoundingClientRect();
} else {
scrollerRect = {
top: 0,
bottom: scroller.innerHeight,
bottom: scroller.value.innerHeight,
};
}
@ -143,14 +142,12 @@ export default createComponent({
});
onMounted(() => {
scrollerRef.value = getScroller(rootRef.value);
if (props.immediateCheck) {
check();
}
});
useGlobalEvent(scrollerRef, 'scroll', check);
useGlobalEvent(scroller, 'scroll', check);
// @exposed-api
const vm = getCurrentInstance().proxy;

13
src/sticky/index.js
View File

@ -1,12 +1,13 @@
import { ref, reactive, computed, onMounted } from 'vue';
import { ref, reactive, computed } from 'vue';
// Utils
import { isHidden } from '../utils/dom/style';
import { unitToPx } from '../utils/format/unit';
import { createNamespace } from '../utils';
import { getScrollTop, getElementTop, getScroller } from '../utils/dom/scroll';
import { getScrollTop, getElementTop } from '../utils/dom/scroll';
// Composition
import { useScroller } from '../composition/use-scroller';
import { useGlobalEvent } from '../composition/use-global-event';
import { useVisibilityChange } from '../composition/use-visibility-change';
@ -26,7 +27,7 @@ export default createComponent({
setup(props, { emit, slots }) {
const rootRef = ref();
const scrollerRef = ref();
const scroller = useScroller(rootRef);
const state = reactive({
fixed: false,
@ -100,11 +101,7 @@ export default createComponent({
emitScrollEvent(scrollTop);
};
onMounted(() => {
scrollerRef.value = getScroller(rootRef.value);
});
useGlobalEvent(scrollerRef, 'scroll', onScroll);
useGlobalEvent(scroller, 'scroll', onScroll);
useVisibilityChange(rootRef, onScroll);
return () => {