jiangx
3 years ago
@ -0,0 +1,82 @@ |
|||||
|
const MAX_LENGTH = 20 |
||||
|
let pageIndex = 1 //数组中需要分页(即下标为pageIdx的数据)的当前页 大数组中的二维
|
||||
|
const pageSize = 20 //一页显示的条数
|
||||
|
let pageList = [] //用于UI渲染的列表
|
||||
|
let showMore = false |
||||
|
let pageIdx = 0 //当前是数组中的哪一项需要分页 大数组中的一维
|
||||
|
let allList = [] |
||||
|
let loaded = false |
||||
|
function loadMore(_pageIndex) { |
||||
|
if (!Array.isArray(allList)) { |
||||
|
return |
||||
|
} |
||||
|
//如果数组中的大分页项大于等于大数组的长度则全部分页完成
|
||||
|
if (pageIdx >= allList.length) { |
||||
|
loaded = true |
||||
|
return |
||||
|
} |
||||
|
pageIndex = _pageIndex |
||||
|
const size = allList[pageIdx].shopList.slice(0, pageIndex * pageSize) |
||||
|
//数组中需要分页的列表项是否存在于渲染列表中 如果有则直接把分页的数据赋值 没有则新开一个放到渲染列表中
|
||||
|
if (pageList[pageIdx]?.name) { |
||||
|
pageList[pageIdx].shopList = size |
||||
|
} else { |
||||
|
pageList.push({ |
||||
|
name: allList[pageIdx].name, |
||||
|
shopList: size |
||||
|
}) |
||||
|
} |
||||
|
|
||||
|
showMore = false |
||||
|
} |
||||
|
|
||||
|
function scrollEnd() { |
||||
|
if (pageIdx >= allList.length || pageIdx < 0) { |
||||
|
loaded = true |
||||
|
return |
||||
|
} |
||||
|
if (pageList[pageIdx].shopList.length >= allList[pageIdx].shopList.length) { |
||||
|
pageIdx++ |
||||
|
pageIndex = 1 |
||||
|
loadMore(pageIndex) |
||||
|
return |
||||
|
} |
||||
|
if (!showMore) { |
||||
|
showMore = true |
||||
|
loadMore(pageIndex + 1) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
self.onmessage = e => { |
||||
|
if (Array.isArray(e.data)) { |
||||
|
allList = e.data |
||||
|
} |
||||
|
if (e.data === 'scrollEnd') { |
||||
|
scrollEnd(allList) |
||||
|
self.postMessage({ pageList, loaded, refresh: false }) |
||||
|
return |
||||
|
} |
||||
|
//数据变化时重置分页数据 一般是点击了业态或楼层筛选
|
||||
|
loaded = false |
||||
|
pageIndex = 1 |
||||
|
pageList = [] |
||||
|
|
||||
|
//找出数据中店铺列表长度大于分页点的索引 从索引处开始分页
|
||||
|
pageIdx = allList.findIndex(item => item.shopList.length > MAX_LENGTH) |
||||
|
|
||||
|
//pageIdx小于0的话 说明没有店铺列表长度大于分页点的 无需分页直接返回数据
|
||||
|
if (pageIdx < 0) { |
||||
|
pageList = e.data |
||||
|
loaded = true |
||||
|
self.postMessage({ pageList, loaded, refresh: true }) |
||||
|
return |
||||
|
} |
||||
|
if (pageIdx !== 0) { |
||||
|
for (let i = 0; i < pageIdx; i++) { |
||||
|
pageList.push(allList[i]) |
||||
|
} |
||||
|
} |
||||
|
loadMore(pageIndex, allList) |
||||
|
self.postMessage({ pageList, loaded, refresh: true }) |
||||
|
} |
||||
|
|
||||
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 531 B |
|
After Width: | Height: | Size: 534 B |
|
After Width: | Height: | Size: 531 B |
|
After Width: | Height: | Size: 534 B |
|
After Width: | Height: | Size: 285 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 242 B |
|
After Width: | Height: | Size: 8.1 KiB |
|
After Width: | Height: | Size: 245 B |
|
After Width: | Height: | Size: 274 B |
|
After Width: | Height: | Size: 1.0 KiB |
@ -0,0 +1,46 @@ |
|||||
|
import { ref, shallowRef, watch, toRaw, nextTick, onBeforeUnmount, type ShallowRef } from 'vue' |
||||
|
|
||||
|
/** |
||||
|
* @param {array} totalList 分页数据源 |
||||
|
* @param {*} scroll 滚动组件的实例 |
||||
|
* @return {*} { scrollEnd, pageList, loaded } |
||||
|
*/ |
||||
|
type PageList = { name: string; shopList: Shop[] } |
||||
|
export const usePage = (totalList: PageList[], scroll: ShallowRef<any>) => { |
||||
|
if (typeof Worker === 'undefined') { |
||||
|
alert('抱歉,当前运行环境不支持Web Worker API, 请升级浏览器版本') |
||||
|
} |
||||
|
const pageList = shallowRef<PageList[]>([]) //用于UI渲染的列表
|
||||
|
const loaded = ref(false) |
||||
|
const worker = ref<Worker>() |
||||
|
worker.value = new Worker('./static/worker/page.worker.js') |
||||
|
worker.value.onmessage = e => { |
||||
|
pageList.value = e.data.pageList |
||||
|
loaded.value = e.data.loaded |
||||
|
if (e.data.refresh) { |
||||
|
nextTick(() => { |
||||
|
scroll.value?.scrollTo?.(0, 0, 100) |
||||
|
}) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
function scrollEnd() { |
||||
|
worker.value?.postMessage('scrollEnd') |
||||
|
} |
||||
|
watch( |
||||
|
totalList, |
||||
|
newVal => { |
||||
|
const rawList = newVal.map(item => toRaw(item)) |
||||
|
worker.value?.postMessage(rawList) |
||||
|
}, |
||||
|
{ |
||||
|
immediate: true |
||||
|
} |
||||
|
) |
||||
|
|
||||
|
onBeforeUnmount(() => { |
||||
|
worker.value?.terminate() |
||||
|
}) |
||||
|
|
||||
|
return { scrollEnd, pageList, loaded } |
||||
|
} |
||||