|
|
<template>
|
|
|
<div
|
|
|
ref="boxRef"
|
|
|
class="box"
|
|
|
v-loading="loading"
|
|
|
>
|
|
|
<div ref="contentRef">
|
|
|
<h3>———下拉加载更多数据———</h3>
|
|
|
<h2
|
|
|
v-for="(item, index) in list"
|
|
|
:key="index"
|
|
|
>
|
|
|
{{ item }}
|
|
|
</h2>
|
|
|
<h1>请使用移动端调试模式打开</h1>
|
|
|
<h2>这里是模拟数据1</h2>
|
|
|
<h2>这里是模拟数据1</h2>
|
|
|
<h2>这里是模拟数据1</h2>
|
|
|
<h2>这里是模拟数据1</h2>
|
|
|
<h2>这里是模拟数据1</h2>
|
|
|
<h2>首屏数据到此</h2>
|
|
|
<h2>模拟数据不够一页下拉加载</h2>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="jsx">
|
|
|
import { ref, onMounted, onBeforeUnmount, nextTick } from 'vue';
|
|
|
import { debounce } from '@pureadmin/utils';
|
|
|
import { useBodyClass } from '@/hooks/useBodyClass';
|
|
|
|
|
|
useBodyClass('body-overflow-hidden');
|
|
|
|
|
|
const boxRef = ref(null);
|
|
|
const contentRef = ref(null);
|
|
|
const list = ref([]);
|
|
|
const loading = ref(false);
|
|
|
let startY = 0;
|
|
|
const beforeHeight = ref(null);
|
|
|
|
|
|
const getData = () => {
|
|
|
console.log(contentRef.value.clientHeight, '内部内容的整体高度');
|
|
|
console.log('加载数据');
|
|
|
beforeHeight.value = contentRef.value.clientHeight;
|
|
|
setTimeout(() => {
|
|
|
loading.value = false;
|
|
|
let tempList = [];
|
|
|
let currentLength = list.value.length;
|
|
|
for (let i = 20; i > 0; i--) {
|
|
|
tempList.push(`模拟数据${i + currentLength}`);
|
|
|
}
|
|
|
list.value = tempList.concat(list.value);
|
|
|
// 下拉加载数据，滚动条滚动到加载数据前位置
|
|
|
nextTick(() => (boxRef.value.scrollTop = contentRef.value.clientHeight - beforeHeight.value));
|
|
|
}, 2000);
|
|
|
};
|
|
|
const handleTouchstart = (e) => {
|
|
|
startY = e.touches[0].clientY;
|
|
|
};
|
|
|
const handleTouchmove = (e) => {
|
|
|
console.log('监听鼠标移动事件', e);
|
|
|
if (!shouldHandleTouch()) {
|
|
|
return;
|
|
|
}
|
|
|
const currentY = e.touches[0].clientY;
|
|
|
if (currentY - startY > 100) {
|
|
|
e.preventDefault && e.preventDefault();
|
|
|
loading.value = true;
|
|
|
// 这里调用是因为debounce的原因，debounc会延迟，导致touchend事件先执行，所以这里需要手动触发一次
|
|
|
handleTouchend();
|
|
|
}
|
|
|
};
|
|
|
const debounceHandleTouchmove = debounce(handleTouchmove, 100);
|
|
|
const handleTouchend = () => {
|
|
|
if (loading.value) {
|
|
|
getData();
|
|
|
}
|
|
|
};
|
|
|
const shouldHandleTouch = () => {
|
|
|
console.log(boxRef.value.scrollTop, '整个容器当前滚动条位置');
|
|
|
if (boxRef.value.scrollTop > 0 || loading.value) {
|
|
|
return false;
|
|
|
}
|
|
|
return true;
|
|
|
};
|
|
|
|
|
|
const addTouchEventListeners = () => {
|
|
|
boxRef.value.addEventListener('touchstart', handleTouchstart);
|
|
|
boxRef.value.addEventListener('touchmove', debounceHandleTouchmove);
|
|
|
boxRef.value.addEventListener('touchend', handleTouchend);
|
|
|
};
|
|
|
const removeTouchEventListeners = () => {
|
|
|
boxRef.value.removeEventListener('touchstart', handleTouchstart);
|
|
|
boxRef.value.removeEventListener('touchmove', debounceHandleTouchmove);
|
|
|
boxRef.value.removeEventListener('touchend', handleTouchend);
|
|
|
};
|
|
|
|
|
|
onMounted(() => {
|
|
|
addTouchEventListeners();
|
|
|
});
|
|
|
onBeforeUnmount(() => {
|
|
|
removeTouchEventListeners();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.box {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
align-items: center;
|
|
|
background: #fff;
|
|
|
height: calc(100vh - 81px);
|
|
|
overflow-x: hidden;
|
|
|
overflow-y: auto;
|
|
|
|
|
|
h2 {
|
|
|
padding: 10px 0;
|
|
|
}
|
|
|
}
|
|
|
</style>
|