Vue横向菜单滚动翻页功能的实现

最新推荐文章于 2024-06-29 15:18:41 发布

watanaki

最新推荐文章于 2024-06-29 15:18:41 发布

阅读量2.6k

点赞数 3

分类专栏：组件模块文章标签： javascript 前端 vue.js html

本文链接：https://blog.csdn.net/Watanaki/article/details/111060410

版权

本文介绍了在Vue中如何实现横向菜单的滚动翻页功能，利用走马灯原理，结合HTML、CSS和JavaScript，详细阐述了具体实现过程，并提到了窗口大小变化时的注意事项，以防止显示错误。

摘要由CSDN通过智能技术生成

横向菜单滚动翻页功能的实现

实现方法

使用了走马灯的思想，将菜单项放在一排，超过显示区域隐藏，点击实现菜单的滚动。

效果图

具体实现

html部分

<div class="dataNav">
    <button class="dataNavPrev" @click="navPrev"><</button> //向前翻页按钮
    <ul class="dataNavList" ref="dataNavList">
        <li class="dataNavListItem" v-for="(item, index) in navList" :key="index" :style="{transform:'translateX(-'

最低0.47元/天解锁文章

watanaki

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
2
评论
Vue横向菜单滚动翻页功能的实现

横向菜单滚动翻页功能的实现实现方法使用了走马灯的思想，将菜单项放在一排，超过显示区域隐藏，点击实现菜单的滚动。效果图具体实现html部分<div class="dataNav"> <button class="dataNavPrev" @click="navPrev"><</button> //向前翻页按钮 <ul class="dataNavList" ref="dataNavList">
复制链接

扫一扫

专栏目录