<script setup>
import { onBeforeRouteLeave } from 'vue-router'
const { listRef } = useScrollCache()
/**
 * @description: 滚动定位缓存
 */
function useScrollCache() {
    const listRef = ref(null)
    let scrollTop = 0
    onBeforeRouteLeave(() => {
        scrollTop = listRef.value.scrollTop
    })
    return {
        listRef
    }
}
</script>
<template>
    <div class="app-list" ref="listRef">
        <van-pull-refresh
            v-model="refreshing"
            :success-text="successText"
            @refresh="onRefresh"
        >
            <van-list
                v-model:loading="loading"
                @load="onLoad"
                :finished="finished"
                :finished-text="finishedText"
                :offset="100"
            >
                <slot name="content" :list="list"> </slot>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<style lang="scss" scoped>
.app-list {
    height: 100%;
    overflow-y: auto;
}
</style>
复制代码

<script setup>
import { onBeforeRouteLeave } from 'vue-router'
const { listRef } = useScrollCache()
/**
 * @description: 滚动定位缓存
 */
function useScrollCache() {
    const listRef = ref(null)
    let scrollTop = 0
    onActivated(() => {
        // 激活时重新定位
        listRef.value.scrollTop = scrollTop
    })
    onBeforeRouteLeave(() => {
        // 离开记录位置
        scrollTop = listRef.value.scrollTop
    })
    return {
        listRef
    }
}
</script>
复制代码

<script setup>
// This starter template is using Vue 3 <script setup> SFCs
const options1 = {
    getData: () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    data: new Array(20),
                    total: 30
                })
            }, 1000)
        })
    }
}
const options2 = {
    getData: () => {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
                resolve({
                    data: new Array(20),
                    total: 30
                })
            }, 1000)
        })
    }
}
const activeName = ref('a')
</script>
<template>
    <app-page>
        <van-tabs
            class="app-tab-list"
            v-model:active="activeName"
            :animated="true"
        >
            <van-tab title="标签 1" name="a">
                <app-list :options="options1">
                    <template #content="{ list }">
                        <van-cell
                            v-for="(item, index) in list"
                            :key="index"
                            :title="index"
                        />
                    </template>
                </app-list>
            </van-tab>
            <van-tab title="标签 2" name="b">
                <app-list :options="options2">
                    <template #content="{ list }">
                        <van-cell
                            v-for="(item, index) in list"
                            :key="index"
                            :title="index"
                        />
                    </template>
                </app-list>
            </van-tab>
            <van-tab title="标签 3" name="c"> c </van-tab>
        </van-tabs>
    </app-page>
</template>
复制代码