如何實現鬥魚導航滑動功能？

<template>
    <div id="mynav"> 
        <ul>
            <li :class="current === -1 ? 'active' : ''" @click = "navclick(-1)">
                <span>推薦</span>
            </li>
            <li v-for="(item , index) in data" :key="item.shortName" :class="current === index ? 'active' : ''"  @click = "navclick(index)">
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
</template>
<script>
import {navList} from '../../api/index'
export default {
    // name: mynav,
    data(){
        return{
            data: [],
            current: -1
        }
    },
    created() {
        navList().then(res => {
            // console.log(res)
            this.data = res;
        })
    },
    methods:{
        navclick(i){
            this.current = i
        }
    }
}
</script>
<style scoped>
    #mynav {  /* 設置整個盒子的寬度爲100% 橫向超出的爲自動 */
        width: 100%;
        overflow-x: auto;
    }
        /* 刪除滾動條 */
    #mynav::-webkit-scrollbar {
        display: none;
    }
    ul {
        display: flex;
        width: 210%;
    }
    li {
        font-size: .28rem;
        height: .88rem;
        line-height: .88rem;
    }
    span {
        margin: 0 .2rem
    }
    .active span {
        color: #ff6700;
        font-weight: 900;
        border-bottom: 2px solid #ff6700;
        
    }
    span {
        padding-bottom: .03rem;
    }
</style>