1、首先安装vant
npm i vant
2、app.vue中的内容如下：
<template>
<van-tabs v-model:active="active" @click-tab="indexChange" >
<van-tab v-for="index in totalData.length" :title="'标签 ' + index">
<div class="contain">
<van-list
v-model:loading="loading"
:finished="finished"
finished-text="没有更多了"
@load="onLoad"
>
<van-cell v-for="item in totalData[index-1]['标签']" :key="item" :title="item" />
</van-list>
</div>
</van-tab>
</van-tabs>
</template>
<script setup>
import {
reactive, ref} from "vue";
const active = ref(0);
const totalData = reactive([
{
'标签':['1','2','3','4']},
{
'标签':['a','b','c','d']},
{
'标签':[]},
{
'标签':[]},
{
'标签':[]},
{
'标签':[]},
{
'标签':[]},
{
'标签':[]},
])
const loading = ref(false);
const finished = ref(false);
const indexChange = () => {
if (totalData[active.value]['标签'].length >= 40) {
finished.value = true;
}else {
finished.value = false;
}
}
const onLoad = () => {
// 异步更新数据
// setTimeout 仅做示例，真实场景中一般为 ajax 请求
if (active.value === 0){
console.log('active.value0',active.value)
setTimeout(() => {
for (let i = 0; i < 10; i++) {
totalData[active.value]['标签'].push(totalData[active.value]['标签'].length + 1);
}
// 加载状态结束
loading.value = false;
// 数据全部加载完成
if (totalData[active.value]['标签'].length >= 40) {
finished.value = true;
}
}, 1000);
}
else if (active.value === 1){
console.log('active.value1', active.value);
// 注意标签之间切换的太快了即使不是active.value===1的也会走到这里，这个是个小问题
setTimeout(() => {
for (let i = 0; i < 10; i++) {
totalData[active.value]['标签'].push(totalData[active.value]['标签'].length + 1);
}
// 加载状态结束
loading.value = false;
// 数据全部加载完成
if (totalData[active.value]['标签'].length >= 40) {
finished.value = true;
}
}, 1000);
}else {
console.log(totalData[active.value]['标签'])
console.log(totalData)
loading.value = false;
finished.value = true;
}
};
</script>
<style scoped lang="less">
// 最重要的其实就是这个固定定位
.contain{
position: fixed;
top: 100px; // 模拟场景是将上边的不动
left: 0;
right: 0px;
bottom: 100px; // 模拟场景是下边还有内容
background-color: pink;
overflow-y: scroll;
}
</style>
最终效果如下：
把标签一滑动到4
把标签2滑动到c，再次切换到标签1发现还是在4的位置，这就很好
