如何实现斗鱼导航滑动功能？

昨夜太平长安888

于 2020-06-27 17:20:26 发布

阅读量398

点赞数

分类专栏： Vue 笔记 CSS 文章标签： vue.js html5 css

本文链接：https://blog.csdn.net/HelloWord176/article/details/106985233

版权

Vue 同时被 3 个专栏收录

59 篇文章

订阅专栏

CSS

14 篇文章

订阅专栏

笔记

1 篇文章

订阅专栏

本文介绍了一个使用Vue.js创建的导航组件实例，展示了如何通过v-for循环动态生成导航项，并使用@click事件监听器处理导航点击事件。同时，组件还实现了响应式设计，包括自动隐藏滚动条和设置导航项的激活状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<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>