uniapp tabs 滑动的时候，定位到tabItem的位置

<template>
<view
class="body-view display-flex align-items-flex-start justify-content-center flex-direction-column position-relative">

<scroll-view class="top-menu-view display-flex position-absolute" scroll-x="true"
:scroll-into-view="tabCurrent" :scroll-left="scrollLeft">
//??? scrollLeft是重点
<view class="menu-top-view" v-for="(item,index) in tabs" :key="index" @click="swichMenu(index)">
<view class="position-relative" :class="[currentTab==index ? 'activeText' : '']">
<text class="fs-14 color-9E9E9E">{{item.description}}</text>
<view class="redNod" v-if="item.count >0"></view>
</view>
</view>
</scroll-view>

<swiper class="swiper-box-list" :current="currentTab" @change="swiperChange">
<swiper-item class="swiper-topic-list" v-for="(item, index) in tabs">
<view class="swiper-item">
<view class="">
<ListContent v-if="currentTab==index" :tableList="tableList" @refersh="refershList" />
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>

<script lang="ts" setup>
import { computed, ref, reactive, toRefs, onMounted, watch } from 'vue'
import { APP_USER_KIND, APP_USER_ID, APP_STUDENT_USER_ID, APP_STUDENT_BAND_NO } from '@/config/constants'
import storage from '@/utils/storage.ts'
import { onLoad, onReady } from "@dcloudio/uni-app"
// import { messageTypeList } from '../config/mesType'
import ListContent from '../components/listContent'
import { getNoticeListApi, notReadCountByTypeApi, readAllApi, readByTypeApi, getNotifyMessageType } from '../api/index'

const scrollLeft = ref(0);

const messageTypeList = ref([])
const props = defineProps({
    isReadAll: {
        // 搜索匹配关键词，用来处理高亮展示
        type: Boolean,
        default: false,
    },
})

const updateIsReadAll = () => {

    let currentIndex = currentTab.value;
    let info = tabs.value[currentTab.value]
    console.log('info ===', info);
    if (currentIndex == 0) {
        //调取刷新全部已读的数据接口
        readAllApiInfo()
    } else {
        //调取刷新部分类型已读数据的接口
        readByTypeApiInfo()
    }
}

const readAllApiInfo = async () => {
    const data = {
        studentUserId: studentUserId.value,

    }
    const res = await readAllApi(data)
    console.log('res  11111', res)

    //刷新数据头为消息全部已读
    tabs.value.forEach((item) => {
        item.count = 0
    })

    //刷新数据
    refershList()
}

const readByTypeApiInfo = async () => {
    const data = {
        studentUserId: studentUserId.value,
        type: currentType.value
    }
    const res = await readByTypeApi(data)
    console.log('res 0000', res)
    //刷新数据头为消息全部已读
    tabs.value[currentTab.value].count = 0
    //刷新数据
    refershList()
}


defineExpose({
    updateIsReadAll
})

const emit = defineEmits(['changeTab'])
const state = reactive({
    tableList: [],
    redCountList: [],
    tabs: [],
})

const { tableList, redCountList, tabs } = toRefs(state)
const currentType = ref('all')
const studentUserId = ref('')

let currentTab = ref(0);
let tabCurrent = ref('tabNum0')

// 滑动导航
const swichMenu = (index) => {
    currentTab.value = index
    tabCurrent.value = 'tabNum' + index
    scrollLeft.value = index * 50
};
// 滑动下边的标签页
const swiperChange = (e) => {
    let index = e.detail.current
     
    currentType.value = messageTypeList.value[index].messageType;
     swichMenu(index);
    getNoticeList();
}

const getNoticeList = async () => {
    const data = {
        studentUserId: studentUserId.value,
        type: currentType.value
    }
    const res = await getNoticeListApi(data)
    let arr = res ? res : []
    tableList.value = arr.map(item => {
        messageTypeList.value.map(typeItem => {
            if (item.messageType == typeItem.messageType) {
                item.iconUrl = typeItem.iconUrl
            }
        })
        return item
    })
}

const getNotReadCount = async () => {
    const data = {
        studentUserId: studentUserId.value
    }
    const res = await notReadCountByTypeApi(data)
    redCountList.value = res ? res : []
    let arr = []
    redCountList.value.map(item => {
        messageTypeList.value.map(typeItem => {
            if (item.type == typeItem.messageType) {
                const obj = {
                    ...typeItem,
                    count: item.count
                }
                arr.push(obj)
            }
        })
    })
    tabs.value = arr
    console.log('tabs.value ' ,tabs.value)
}

const refershList = () => {
    
}

onMounted(() => {

    
    getMessageListType()
    getNoticeList();
    getNotReadCount();
})


const getMessageListType = async () => {


    const res = await getNotifyMessageType()
    let arr = res ? res : []
    tabs.value = arr
    messageTypeList.value = arr
}

</script>

<style lang="scss" scoped>
@import '@/css/index.scss';
@import "@/css/common.scss";

.color-9E9E9E {
    color: #9E9E9E
}

:deep .swiper-box-list {
    background-color: transparent;
    border-radius: 10px;
    height: calc(100vh - 200px - 20px);
}

:deep .uni-select__selector .uni-scroll-view-content {
    display: block;
}

.body-view {
    height: calc(100vh - 50px - 80px);
    width: 100%;
    padding-top: 86rpx;
    position: relative;
}

.top-menu-view {
    flex-shrink: 0;
    white-space: nowrap;
    width: 100%;
    height: 90rpx;
    line-height: 90rpx;
    top: 0;
    left: 0;
    right: 0;
    margin-bottom: 5px;
    position: absolute;
}

.menu-top-view {
    display: inline-block;
    white-space: nowrap;
    height: 40px;
    line-height: 40px;
    position: relative;
    margin-right: 40px;
}

.activeText {
    border-bottom: 6px solid #6B8FFF;
}

.activeText .color-9E9E9E {
    color: #3D3D3D;
    font-weight: bold;
}

.swiper-box-list {
    margin-top: 10px;
    width: 100%;
    // height: calc(100vh - 50px - v-bind(topBarHeight));

    flex: 1;
    background-color: transparent;

    .swiper-topic-list {
        width: 100%;
        background-color: transparent;
        overflow-y: auto;
    }
}

.redNod {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background-color: red;
    position: absolute;
    top: 13px;
    right: -5px;
}

</style>