1
This commit is contained in:
@@ -0,0 +1,799 @@
|
||||
<template>
|
||||
<!-- #ifdef APP-HARMONY -->
|
||||
<view class="xVirtualList" ref="xVirtualList">
|
||||
<view >
|
||||
<!--
|
||||
@slot sticky插槽
|
||||
-->
|
||||
<slot name="sticky"></slot>
|
||||
</view>
|
||||
<scroll-view
|
||||
:show-scrollbar="false"
|
||||
type="nested"
|
||||
style="flex:1"
|
||||
>
|
||||
|
||||
<nested-scroll-header>
|
||||
<view>
|
||||
<!--
|
||||
@slot 顶部插槽，仅APP有效，它是nested-scroll-header协商节点，会自动与内容衔接在头上然后自动上往上推。
|
||||
-->
|
||||
<slot name="header"></slot>
|
||||
</view>
|
||||
</nested-scroll-header>
|
||||
<nested-scroll-body>
|
||||
<view style="flex:1">
|
||||
<scroll-view
|
||||
:show-scrollbar="false"
|
||||
@scroll="onScroll"
|
||||
:refresher-enabled="_refresherEnabled"
|
||||
refresher-default-style="none"
|
||||
:refresher-triggered="refresherTriggered"
|
||||
:scroll-top="scrollTopTop"
|
||||
@refresherpulling="refresherpulling"
|
||||
@refresherrefresh="refresherrefresh"
|
||||
@refresherrestore="refresherrestore"
|
||||
@refresherabort="refresherabort"
|
||||
@scrolltoupper="scrolltoupper"
|
||||
@scrolltolower="scrolltolower"
|
||||
direction="vertical"
|
||||
associative-container="nested-scroll-view"
|
||||
>
|
||||
|
||||
<!-- 自定义下拉刷新元素 -->
|
||||
<!-- #ifndef APP-HARMONY -->
|
||||
<view v-if="_refresherEnabled" @click="refreshOnload" slot="refresher" class="refresh-box" :style="{height:refreshHeight+'px'}">
|
||||
<x-icon :color="refresState==2?'primary':''" v-if="refresState==0||refresState==1||refresState==2||refresState==3" :duration="800" :spin="refresState==2" name="loader-line" font-size="26"></x-icon>
|
||||
<x-icon v-if="refresState==5" color="success" name="checkbox-circle-line" font-size="26"></x-icon>
|
||||
<x-icon v-if="refresState==4" color="error" name="error-warning-fill" font-size="26"></x-icon>
|
||||
<view class="tip-text" >
|
||||
<x-text font-size="16">{{refresStateMap.get(refresState)}}</x-text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- #ifdef APP-HARMONY -->
|
||||
<view v-if="(refresState==5||refresState==4) && _refresherEnabled" @click="refreshOnload" class="refresh-box" :style="{height:refreshHeight+'px'}">
|
||||
<x-icon v-if="refresState==5" color="success" name="checkbox-circle-line" font-size="26"></x-icon>
|
||||
<x-icon v-if="refresState==4" color="error" name="error-warning-fill" font-size="26"></x-icon>
|
||||
<view class="tip-text" >
|
||||
<x-text font-size="16">{{refresStateMap.get(refresState)}}</x-text>
|
||||
</view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
<!-- 虚拟占位容器，用于撑开滚动高度 -->
|
||||
<view class="xVirtualListContainer" :style="{ height: totalHeight + 'px', paddingTop: offsetY + 'px' }">
|
||||
<!--
|
||||
@slot 内容插槽你在这里渲染内容
|
||||
@prop {any[]} data - list数据
|
||||
@prop {number} startIndex - 数据切割的起始位置
|
||||
@prop {number} endIndex - 数据切割的结束位置
|
||||
-->
|
||||
<slot name="default" :data="renderList" :startIndex="startIndex" :endIndex="endIndex"></slot>
|
||||
</view>
|
||||
<!-- 自定义下拉刷新元素 -->
|
||||
<view @click="refreshBottomOnload" v-if="_refresherBottomEnabled&&refresBottomState!=0" class="refresh-box" :style="{height:refreshHeight+'px'}">
|
||||
<x-icon color="primary" v-if="refresBottomState==1" :spin="true" name="loader-line" font-size="26"></x-icon>
|
||||
<x-icon v-if="refresBottomState==2" color="error" name="error-warning-fill" font-size="26"></x-icon>
|
||||
<view class="tip-text" >
|
||||
<x-text font-size="16">{{bottomRefresStateMap.get(refresBottomState)}}</x-text>
|
||||
</view>
|
||||
</view>
|
||||
<!--
|
||||
@slot 底部插槽
|
||||
-->
|
||||
<slot name="bottom"></slot>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</nested-scroll-body>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- #endif -->
|
||||
|
||||
<!-- #ifdef MP||WEB||APP-IOS||APP-ANDROID -->
|
||||
<view class="xVirtualList" ref="xVirtualList" >
|
||||
|
||||
<view >
|
||||
<!--
|
||||
@slot sticky插槽
|
||||
-->
|
||||
<slot name="sticky"></slot>
|
||||
</view>
|
||||
|
||||
<scroll-view
|
||||
:show-scrollbar="false"
|
||||
@scroll="onScroll"
|
||||
class="xVirtualListScrollBody"
|
||||
:refresher-enabled="_refresherEnabled"
|
||||
refresher-default-style="none"
|
||||
:scroll-y="true"
|
||||
:refresher-triggered="refresherTriggered"
|
||||
:scroll-top="scrollTopTop"
|
||||
:style="{ height: containerHeight + 'px' }"
|
||||
@refresherpulling="refresherpulling"
|
||||
@refresherrefresh="refresherrefresh"
|
||||
@refresherrestore="refresherrestore"
|
||||
@refresherabort="refresherabort"
|
||||
@scrolltoupper="scrolltoupper"
|
||||
@scrolltolower="scrolltolower"
|
||||
>
|
||||
|
||||
<!-- 自定义下拉刷新元素 -->
|
||||
<view @click="refreshOnload" slot="refresher" class="refresh-box" :style="{height:refreshHeight+'px'}">
|
||||
<x-icon :color="refresState==2?'primary':''" v-if="refresState==0||refresState==1||refresState==2||refresState==3" :duration="800" :spin="refresState==2" name="loader-line" font-size="26"></x-icon>
|
||||
<x-icon v-if="refresState==5" color="success" name="checkbox-circle-line" font-size="26"></x-icon>
|
||||
<x-icon v-if="refresState==4" color="error" name="error-warning-fill" font-size="26"></x-icon>
|
||||
<view class="tip-text" >
|
||||
<x-text font-size="16">{{refresStateMap.get(refresState)}}</x-text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 虚拟占位容器，用于撑开滚动高度 -->
|
||||
<view class="xVirtualListContainer" :style="{ height: totalHeight + 'px', paddingTop: offsetY + 'px' }">
|
||||
|
||||
<!--
|
||||
@slot 内容插槽你在这里渲染内容
|
||||
@prop {any[]} data - list数据
|
||||
@prop {number} startIndex - 数据切割的起始位置
|
||||
@prop {number} endIndex - 数据切割的结束位置
|
||||
-->
|
||||
<slot name="default" :data="renderList" :startIndex="startIndex" :endIndex="endIndex"></slot>
|
||||
</view>
|
||||
<!-- 自定义下拉刷新元素 -->
|
||||
<view @click="refreshBottomOnload" v-if="_refresherBottomEnabled&&refresBottomState!=0" class="refresh-box" :style="{height:refreshHeight+'px'}">
|
||||
<x-icon color="primary" v-if="refresBottomState==1" :spin="true" name="loader-line" font-size="26"></x-icon>
|
||||
<x-icon v-if="refresBottomState==2" color="error" name="error-warning-fill" font-size="26"></x-icon>
|
||||
<view class="tip-text" >
|
||||
<x-text font-size="16">{{bottomRefresStateMap.get(refresBottomState)}}</x-text>
|
||||
</view>
|
||||
</view>
|
||||
<!--
|
||||
@slot 底部插槽
|
||||
-->
|
||||
<slot name="bottom"></slot>
|
||||
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<!-- #endif -->
|
||||
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { getCurrentInstance, ref, computed, onMounted, onBeforeUnmount, nextTick, watch } from "vue"
|
||||
import { getUid } from "../../core/util/xCoreUtil.uts"
|
||||
import { getDefaultColor } from "../../core/util/xCoreColorUtil.uts"
|
||||
import { checkIsCssUnit, getUnit } from "../../core/util/xCoreUtil.uts"
|
||||
import { xConfig } from "../../config/xConfig.uts"
|
||||
const i18n = xConfig.i18n;
|
||||
/**
|
||||
* 虚拟列表组件属性类型定义
|
||||
*/
|
||||
type xVirtualListType = {
|
||||
/** 项目高度，不可用auto,只能是数字（默认为px),带单位的rpx,px */
|
||||
itemHeight: string,
|
||||
/** 渲染显示多少个,它不是最终的渲染数量，是最少数量，因为内部还有个缓存数量 */
|
||||
viewCount: number,
|
||||
/** 数据列表 */
|
||||
list: any[],
|
||||
/** 缓冲区大小，在可视区域前后额外渲染的项目数量 */
|
||||
bufferSize: number,
|
||||
/** 是否启用虚拟滚动 */
|
||||
enableVirtual: boolean,
|
||||
/** 启用下拉刷新 */
|
||||
refresherEnabled: boolean,
|
||||
/** 需要自行管理下拉状态，默认为false,通过事件pull触发设置为true,结束设置为False */
|
||||
pullState:boolean,
|
||||
/** 启用触底刷新 */
|
||||
refresherBottomEnabled: boolean,
|
||||
/** 需要自行管理下拉状态，默认为false,通过事件bottom触发设置为true,结束设置为False */
|
||||
bottomState:boolean,
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
* 容器尺寸类型定义
|
||||
*/
|
||||
type Bounds = {
|
||||
width: number,
|
||||
height: number,
|
||||
top: number,
|
||||
}
|
||||
|
||||
/**
|
||||
* 滚动容器尺寸类型定义
|
||||
*/
|
||||
type ScrollContainerBounds = {
|
||||
width: number,
|
||||
height: number,
|
||||
scrollHeight: number,
|
||||
scrollTop: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 虚拟列表渲染范围类型定义
|
||||
*/
|
||||
type RenderRange = {
|
||||
startIndex: number,
|
||||
endIndex: number,
|
||||
offsetY: number
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新状态
|
||||
* 0,'继续下拉刷新'
|
||||
* 1,'松开刷新'
|
||||
* 2,'数据刷新中'
|
||||
* 3,'取消刷新'
|
||||
* 4,'刷新超时,点击重试'
|
||||
*/
|
||||
type refresStateType = 0|1|2|3|4|5
|
||||
/**
|
||||
* 0初始值
|
||||
* 1刷新中
|
||||
* 2超时出错了
|
||||
*/
|
||||
type bottomStateType = 0|1|2
|
||||
|
||||
/**
|
||||
* @name 虚拟列表 xVirtualList
|
||||
* @description 这是一个超高虚拟列表，无论几万数据都能轻松应对是你列表处理数据的不二之选，集成下拉刷新，触底更新，指定索引位置等。
|
||||
* 未来将应于表格，picker等系列组件，作为其它组件的底层存在，极大提高性能。使用时请注意demo示例使用方法。
|
||||
* @page /pages/zhanshi/virtual-list
|
||||
* @category 展示组件
|
||||
* @constant 平台兼容
|
||||
* | Harmony | H5 | andriod | IOS | 小程序 | UTS | UNIAPP-X SDK | version |
|
||||
| --- | --- | --- | --- | --- | --- | --- | --- |
|
||||
| ☑ | ☑ | ☑️ | ☑️ | ☑️ | ☑️ | 4.76+ | 1.1.18 |
|
||||
*/
|
||||
defineOptions({name:"xVirtualList"})
|
||||
|
||||
const proxy = getCurrentInstance()?.proxy;
|
||||
const xVirtualList = ref<UniElement|null>(null)
|
||||
const nestHeader = ref<UniElement|null>(null)
|
||||
|
||||
|
||||
/**
|
||||
* 组件事件定义
|
||||
*/
|
||||
const emits = defineEmits<{
|
||||
/** 滚动事件 */
|
||||
scroll: [detail: UniScrollEventDetail],
|
||||
/** 滚动到顶时触发 */
|
||||
pull: [],
|
||||
/** 触底时触发 */
|
||||
bottom: [],
|
||||
/** 渲染范围变化时触发 */
|
||||
rangeChange: [range: RenderRange]
|
||||
}>()
|
||||
|
||||
/**
|
||||
* 组件属性定义
|
||||
*/
|
||||
const props = withDefaults(defineProps<xVirtualListType>(), {
|
||||
itemHeight: "50",
|
||||
viewCount: 5,
|
||||
bufferSize: 2,
|
||||
enableVirtual: true,
|
||||
list: () => [] as any[],
|
||||
refresherEnabled: false,
|
||||
refresherBottomEnabled: false,
|
||||
pullState:false,
|
||||
bottomState:false
|
||||
})
|
||||
|
||||
/** 当前滚动位置 */
|
||||
const scrollTop = ref(0)
|
||||
const scrollTopTop = ref(0)
|
||||
|
||||
/** 滚动容器总高度 */
|
||||
const scrollHeight = ref(0)
|
||||
/** 容器的尺寸 */
|
||||
const containerBounds = ref<Bounds>({ width: 0, height: 0,top:0 })
|
||||
/** 是否已初始化 */
|
||||
const isInitialized = ref(false)
|
||||
/** 防抖定时器 */
|
||||
let scrollTimer: number | null = null
|
||||
const disabledScroll = ref(false)
|
||||
const _refresherEnabled = computed((): boolean => props.refresherEnabled)
|
||||
const _refresherBottomEnabled = computed((): boolean => props.refresherBottomEnabled)
|
||||
const _isDark= computed((): boolean => xConfig.dark == 'dark')
|
||||
const refreshHeight = ref(45)
|
||||
const refresStateMap = ref<Map<number,string>>(new Map([
|
||||
[0,i18n.t("tmui4x.virtualList.status_0")],
|
||||
[1,i18n.t("tmui4x.virtualList.status_1")],
|
||||
[2,i18n.t("tmui4x.virtualList.status_2")],
|
||||
[3,i18n.t("tmui4x.virtualList.status_3")],
|
||||
[4,i18n.t("tmui4x.virtualList.status_4")],
|
||||
[5,i18n.t("tmui4x.virtualList.status_5")],
|
||||
]))
|
||||
const bottomRefresStateMap = ref<Map<number,string>>(new Map([
|
||||
[0,i18n.t("tmui4x.virtualList.status_0")],
|
||||
[1,i18n.t("tmui4x.virtualList.status_1")],
|
||||
[2,i18n.t("tmui4x.virtualList.status_2")]
|
||||
]))
|
||||
const refresState = ref<refresStateType>(0)
|
||||
const refresBottomState = ref<refresStateType>(0)
|
||||
|
||||
const refresherTriggered = ref(props.pullState)
|
||||
const bottomTriggered = ref(props.bottomState)
|
||||
let timeoutid = null as null|number
|
||||
let timeoutid2 = null as null|number
|
||||
|
||||
/**
|
||||
* 用户定义的项目高度（转换为px）
|
||||
*/
|
||||
const itemHeight = computed((): number => {
|
||||
const heightval = checkIsCssUnit(props.itemHeight, xConfig.unit);
|
||||
const unit = getUnit(heightval);
|
||||
let realHeight = parseInt(heightval);
|
||||
if (unit === 'rpx') {
|
||||
realHeight = uni.rpx2px(realHeight)
|
||||
}
|
||||
return realHeight;
|
||||
})
|
||||
|
||||
/**
|
||||
* 容器高度（转换为px）
|
||||
*/
|
||||
const containerHeight = computed((): number => {
|
||||
return containerBounds.value.height;
|
||||
})
|
||||
|
||||
/**
|
||||
* 数据列表
|
||||
*/
|
||||
const _list = computed((): any[] => props.list)
|
||||
|
||||
/**
|
||||
* 列表总高度
|
||||
*/
|
||||
const totalHeight = computed((): number => {
|
||||
return _list.value.length * itemHeight.value;
|
||||
})
|
||||
|
||||
/**
|
||||
* 可视区域能显示的项目数量
|
||||
*/
|
||||
const visibleCount = computed((): number => {
|
||||
if (containerHeight.value <= 0) return props.viewCount;
|
||||
return Math.ceil(containerHeight.value / itemHeight.value);
|
||||
})
|
||||
|
||||
/**
|
||||
* 渲染范围计算
|
||||
*/
|
||||
const renderRange = computed((): RenderRange => {
|
||||
if (!props.enableVirtual || _list.value.length == 0) {
|
||||
return {
|
||||
startIndex: 0,
|
||||
endIndex: _list.value.length - 1,
|
||||
offsetY: 0
|
||||
};
|
||||
}
|
||||
|
||||
// 计算开始索引
|
||||
const startIndex = Math.floor(scrollTop.value / itemHeight.value);
|
||||
// 添加缓冲区
|
||||
const bufferedStartIndex = Math.max(0, startIndex - props.bufferSize);
|
||||
// 计算结束索引
|
||||
const endIndex = Math.min(
|
||||
_list.value.length - 1,
|
||||
startIndex + visibleCount.value + props.bufferSize * 2
|
||||
);
|
||||
|
||||
// 计算偏移量
|
||||
const offsetY = bufferedStartIndex * itemHeight.value;
|
||||
|
||||
return {
|
||||
startIndex: bufferedStartIndex,
|
||||
endIndex,
|
||||
offsetY
|
||||
};
|
||||
})
|
||||
|
||||
/**
|
||||
* 开始索引
|
||||
*/
|
||||
const startIndex = computed((): number => renderRange.value.startIndex)
|
||||
|
||||
/**
|
||||
* 结束索引
|
||||
*/
|
||||
const endIndex = computed((): number => renderRange.value.endIndex)
|
||||
|
||||
/**
|
||||
* Y轴偏移量
|
||||
*/
|
||||
const offsetY = computed((): number => renderRange.value.offsetY)
|
||||
|
||||
/**
|
||||
* 当前渲染的数据列表（通过可视计算切割得到的数据列表）
|
||||
*/
|
||||
const renderList = computed((): any[] => {
|
||||
if (!props.enableVirtual) {
|
||||
return _list.value;
|
||||
}
|
||||
return _list.value.slice(startIndex.value, endIndex.value + 1);
|
||||
})
|
||||
|
||||
/**
|
||||
* 读取容器宽和高
|
||||
*/
|
||||
function getContainerBounds(): Promise<void> {
|
||||
return new Promise((resolve, reject) => {
|
||||
const ele = xVirtualList.value
|
||||
if (ele == null) {
|
||||
reject('容器元素不存在');
|
||||
console.error('容器元素不存在')
|
||||
return;
|
||||
}
|
||||
ele.getBoundingClientRectAsync()?.then((rect: DOMRect) => {
|
||||
containerBounds.value.width = rect.width;
|
||||
containerBounds.value.height = rect.height;
|
||||
containerBounds.value.top = rect.top;
|
||||
isInitialized.value = true;
|
||||
|
||||
resolve();
|
||||
}).catch((error) => {
|
||||
console.error("容器读取宽高失败：", error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 读取非APP子协商头的宽和高。
|
||||
*/
|
||||
function getNestHeaderBounds():Promise<DOMRect>{
|
||||
return new Promise((resolve, reject) => {
|
||||
const ele = nestHeader.value
|
||||
if (ele == null) {
|
||||
reject('子协商头不存在');
|
||||
console.error('子协商头不存在')
|
||||
return;
|
||||
}
|
||||
ele.getBoundingClientRectAsync()?.then((rect: DOMRect) => {
|
||||
resolve(rect);
|
||||
}).catch((error) => {
|
||||
console.error("容器读取宽高失败：", error);
|
||||
reject(error);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 检查滚动边界
|
||||
*/
|
||||
function checkScrollBoundary(detail: UniScrollEventDetail): void {
|
||||
// 检查是否滚动到顶部
|
||||
// if (detail.scrollTop <= 0) {
|
||||
// emits('pull');
|
||||
// }
|
||||
|
||||
// // 检查是否滚动到底部（允许5px的误差）
|
||||
// const isAtBottom = detail.scrollTop + containerHeight.value >= detail.scrollHeight - 5;
|
||||
// if (isAtBottom) {
|
||||
// emits('bottom');
|
||||
// }
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 滚动事件处理（带防抖优化）
|
||||
*/
|
||||
function onScroll(evt: UniScrollEvent): void {
|
||||
const detail = evt.detail
|
||||
// 触发滚动事件
|
||||
emits('scroll', detail);
|
||||
|
||||
// 优化scrollTop赋值，避免边界情况下的重复计算
|
||||
const newScrollTop = evt.detail.scrollTop;
|
||||
const maxScrollTop = totalHeight.value - containerHeight.value;
|
||||
|
||||
// 只有在有效范围内且值发生变化时才更新scrollTop
|
||||
if (newScrollTop >= 0 && newScrollTop <= maxScrollTop && newScrollTop != scrollTop.value) {
|
||||
scrollTop.value = newScrollTop;
|
||||
} else if (newScrollTop < 0 && scrollTop.value != 0) {
|
||||
// 到达顶部时，确保scrollTop为0
|
||||
scrollTop.value = 0;
|
||||
} else if (newScrollTop > maxScrollTop && scrollTop.value != maxScrollTop) {
|
||||
// 到达底部时，确保scrollTop为最大值
|
||||
scrollTop.value = Math.max(0, maxScrollTop);
|
||||
}
|
||||
|
||||
scrollHeight.value = evt.detail.scrollHeight;
|
||||
|
||||
// // 防抖处理边界检测
|
||||
// if (scrollTimer !=null) {
|
||||
// clearTimeout(scrollTimer!);
|
||||
// }
|
||||
// scrollTimer = setTimeout(() => {
|
||||
// checkScrollBoundary(detail);
|
||||
// }, 30);
|
||||
}
|
||||
|
||||
/**
|
||||
* 滚动到指定位置
|
||||
*/
|
||||
function scrollToIndex(index: number): void {
|
||||
if (index < 0 || index >= _list.value.length) {
|
||||
console.warn('滚动索引超出范围');
|
||||
return;
|
||||
}
|
||||
const targetScrollTop = index * itemHeight.value;
|
||||
scrollTop.value = targetScrollTop;
|
||||
scrollTopTop.value = targetScrollTop-1
|
||||
nextTick(()=>{
|
||||
scrollTopTop.value = targetScrollTop
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* 刷新容器尺寸
|
||||
*/
|
||||
function refreshSize(): void {
|
||||
nextTick(() => {
|
||||
getContainerBounds()
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 重置滚动位置
|
||||
*/
|
||||
function resetScroll(): void {
|
||||
scrollTop.value = 0;
|
||||
scrollTopTop.value = 0
|
||||
}
|
||||
/**
|
||||
* 刷新加载数据
|
||||
*/
|
||||
function onpull(){
|
||||
emits('pull');
|
||||
if(timeoutid!=null){
|
||||
clearTimeout(timeoutid! as number)
|
||||
timeoutid = null;
|
||||
}
|
||||
/**
|
||||
* 是否超时
|
||||
*/
|
||||
timeoutid = setTimeout(function() {
|
||||
refresState.value = 4
|
||||
}, 6000);
|
||||
}
|
||||
/**
|
||||
* 刷新加载数据
|
||||
*/
|
||||
function onbottom(){
|
||||
emits('bottom');
|
||||
if(timeoutid2!=null){
|
||||
clearTimeout(timeoutid2! as number)
|
||||
timeoutid2 = null;
|
||||
}
|
||||
/**
|
||||
* 是否超时
|
||||
*/
|
||||
timeoutid2 = setTimeout(function() {
|
||||
refresBottomState.value = 2
|
||||
}, 6000);
|
||||
}
|
||||
function refreshOnload(){
|
||||
refresState.value = 2
|
||||
refresherTriggered.value = true;
|
||||
onpull()
|
||||
}
|
||||
/**
|
||||
* 被下拉。
|
||||
*/
|
||||
function refresherpulling(evt:UniRefresherEvent): void {
|
||||
let pullHeight = evt.detail.dy;
|
||||
// #ifdef APP-HARMONY
|
||||
if(refresState.value==2) return;
|
||||
// #endif
|
||||
if(pullHeight>=refreshHeight.value){
|
||||
refresState.value = 1
|
||||
|
||||
}else{
|
||||
refresState.value = 0
|
||||
}
|
||||
}
|
||||
/**
|
||||
* 触发刷新
|
||||
*/
|
||||
function refresherrefresh(evt:UniRefresherEvent): void {
|
||||
refresState.value = 2
|
||||
refresherTriggered.value = true;
|
||||
onpull()
|
||||
}
|
||||
/**
|
||||
* 被复位
|
||||
*/
|
||||
function refresherrestore(evt:UniRefresherEvent): void {
|
||||
refresherTriggered.value = false;
|
||||
refresState.value = 3
|
||||
}
|
||||
/**
|
||||
* 刷新被中断
|
||||
*/
|
||||
function refresherabort(evt:UniRefresherEvent): void {
|
||||
refresState.value = 3
|
||||
refresherTriggered.value = false;
|
||||
}
|
||||
function scrolltoupper(evt:UniScrollToUpperEvent){
|
||||
if(refresState.value==3||refresState.value ==4){
|
||||
refresState.value =0
|
||||
refresherTriggered.value = false;
|
||||
}
|
||||
}
|
||||
function scrolltolower(evt:UniScrollToLowerEvent){
|
||||
if(refresBottomState.value==2||refresBottomState.value==1||!_refresherBottomEnabled.value) return;
|
||||
refresBottomState.value = 1;
|
||||
bottomTriggered.value = true
|
||||
onbottom()
|
||||
}
|
||||
function refreshBottomOnload(){
|
||||
refresBottomState.value = 1
|
||||
bottomTriggered.value = true;
|
||||
onbottom()
|
||||
}
|
||||
|
||||
/**
|
||||
* 监听刷新外部设置的状态。
|
||||
*/
|
||||
watch(():boolean => props.pullState, (newPullState:boolean) => {
|
||||
if(!newPullState&&refresherTriggered.value&&refresState.value!=4){
|
||||
refresState.value = 5
|
||||
// nextTick(()=>{
|
||||
// refresherTriggered.value = newPullState;
|
||||
// })
|
||||
setTimeout(()=>{
|
||||
refresherTriggered.value = newPullState;
|
||||
},1000)
|
||||
}else if(refresState.value!=4){
|
||||
refresherTriggered.value = newPullState;
|
||||
}
|
||||
|
||||
}, { deep: true });
|
||||
|
||||
/**
|
||||
* 监听刷新外部设置的状态。
|
||||
*/
|
||||
watch(():boolean => props.bottomState, (newPullState:boolean) => {
|
||||
if(!newPullState&&bottomTriggered.value&&refresBottomState.value!=2){
|
||||
refresBottomState.value = 0
|
||||
bottomTriggered.value = false
|
||||
if(timeoutid2!=null){
|
||||
clearTimeout(timeoutid2! as number)
|
||||
timeoutid2 = null;
|
||||
}
|
||||
}else if(refresBottomState.value==2){
|
||||
bottomTriggered.value = false
|
||||
refresBottomState.value = 0
|
||||
}
|
||||
|
||||
}, { deep: true });
|
||||
|
||||
/**
|
||||
* 监听渲染范围变化
|
||||
*/
|
||||
watch(renderRange, (newRange:RenderRange) => {
|
||||
emits('rangeChange', newRange);
|
||||
}, { deep: true });
|
||||
|
||||
|
||||
/**
|
||||
* 监听列表数据变化
|
||||
*/
|
||||
watch(():any => props.list, (newList: any[], oldList: any[]) => {
|
||||
// 如果新列表为空，重置滚动位置
|
||||
// 如果是首次加载数据（从空到有数据）
|
||||
if ((oldList.length == 0 && newList.length > 0 )|| newList.length == 0) {
|
||||
resetScroll();
|
||||
refreshSize();
|
||||
return;
|
||||
}
|
||||
|
||||
// 数据长度变化的处理
|
||||
if (oldList.length != newList.length) {
|
||||
const currentIndex = Math.floor(scrollTop.value / itemHeight.value);
|
||||
|
||||
// 如果数据减少
|
||||
if (newList.length < oldList.length) {
|
||||
// 如果当前位置超出了新数据范围，调整到最后一项
|
||||
if (currentIndex >= newList.length) {
|
||||
const maxIndex = Math.max(0, newList.length - 1);
|
||||
scrollToIndex(maxIndex);
|
||||
}
|
||||
// 否则保持当前位置
|
||||
} else {
|
||||
// 数据增加时，保持当前滚动位置不变
|
||||
// 只需要刷新容器尺寸以适应新的总高度
|
||||
}
|
||||
}
|
||||
|
||||
// 刷新容器尺寸以适应数据变化
|
||||
refreshSize();
|
||||
}, { deep: true });
|
||||
|
||||
/**
|
||||
* 组件挂载时初始化
|
||||
*/
|
||||
onMounted(() => {
|
||||
nextTick(() => {
|
||||
// #ifdef APP-IOS
|
||||
resetScroll();
|
||||
refreshSize();
|
||||
// #endif
|
||||
// #ifndef APP-IOS
|
||||
getContainerBounds()
|
||||
|
||||
// #endif
|
||||
});
|
||||
});
|
||||
|
||||
/**
|
||||
* 组件卸载时清理
|
||||
*/
|
||||
onBeforeUnmount(() => {
|
||||
if (scrollTimer!=null) {
|
||||
clearTimeout(scrollTimer! as number);
|
||||
scrollTimer = null;
|
||||
}
|
||||
if(timeoutid!=null){
|
||||
clearTimeout(timeoutid! as number)
|
||||
timeoutid = null;
|
||||
}
|
||||
if(timeoutid2!=null){
|
||||
clearTimeout(timeoutid2! as number)
|
||||
timeoutid2 = null;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
|
||||
defineExpose({
|
||||
/** 滚动到指定索引 */
|
||||
scrollToIndex,
|
||||
/** 刷新容器尺寸 */
|
||||
refreshSize,
|
||||
/** 重置滚动位置 */
|
||||
resetScroll,
|
||||
/** 获取当前渲染范围 */
|
||||
getRenderRange: ():RenderRange => renderRange.value,
|
||||
/** 获取容器尺寸 */
|
||||
getContainerBounds: ():Bounds => containerBounds.value
|
||||
});
|
||||
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" >
|
||||
|
||||
.refresh-box{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
// #ifdef MP
|
||||
width:100%;
|
||||
// #endif
|
||||
}
|
||||
.tip-text{
|
||||
margin-left: 5px;
|
||||
}
|
||||
.xVirtualListWrap{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.xVirtualList {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.xVirtualListContainer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user