How to realize the slider at the top of the mobile end? Or are there any useful plug-ins to recommend?

how to achieve a slider like the top of the headline? It"s hard to use a MUI. Is there anything else you can recommend

?

this is very simple and you can write one yourself.
gives you a component reference written by yourself

<!--
:tabItems tab[{name, isActive}...]nameisActivechang
:displayProp  
@change   tab:tabItem
ref.setActive(index)  change
ref.setPosition 
-->
<style rel="stylesheet/less" lang="less">
    @checked-color: -sharp4179FF;
    @text-color: -sharp3B435A;
    .slide-tab {
        width: auto;
        white-space: nowrap;
        background: -sharpFFFFFF;
        box-shadow: 0 1px 8px 0 rgba(0, 0, 0, 0.10);
        overflow-x: scroll;
        overflow-y: hidden;
        &::-webkit-scrollbar {
            display: none;
        }
        .slide-item {
            display: inline-block;
            position: relative;
            padding: 15px;
            font-size: 16px;
            color: @text-color;
        }
        .item-checked{
            color: @checked-color;
        }
        .slide-check {
            position: absolute;
            bottom: 0;
            left: 50%;
            height: 3px;
            width: 0;
            transform: translateX(-50%);
            color: @checked-color;
            background: @checked-color;
            transition: all .2s;
        }
        .is-check {
            width: 20px;
        }

    }
</style>
<template>
    <div>
        <div class="slide-tab" ref="slideTab">
            <div class="slide-item" :class="{'item-checked': index === activeIndex}" v-for="(item,index) in tabItems" @click="slide(index)">
                {{item}}
                <div class="slide-check" :class="{'is-check': index === activeIndex}"></div>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            tabItems: {
                type: Array,
                default(){
                    return ['', '', '', '', '', '']
                }
            }
        },
        data() {
            return {
                activeIndex: 0
            }
        },
        methods: {
            slide(index){
                this.activeIndex = index;
                let activeDom = document.getElementsByClassName('slide-item')[index];
                this.$refs.slideTab.scrollLeft = activeDom.offsetLeft;
                this.$emit('on-change', index);
            }
        },
        mounted() {
        }
    }
</script>

Why did I copy your code and reported an error? I added a js,less,cdn link myself

MySQL Query : SELECT * FROM `codeshelper`.`v9_news` WHERE status=99 AND catid='6' ORDER BY rand() LIMIT 5
MySQL Error : Disk full (/tmp/#sql-temptable-64f5-1b3beac-2ba4c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
MySQL Errno : 1021
Message : Disk full (/tmp/#sql-temptable-64f5-1b3beac-2ba4c.MAI); waiting for someone to free some space... (errno: 28 "No space left on device")
Need Help?