前端互助会 2022-01-18 16:49 采纳率: 0%
浏览 36
已结题

vue中封装 横向滚动的导航条 怎么封装？？

vue中封装 横向滚动的导航条 怎么封装？？
如图所示，封装一个导航条，是点击左侧菜单展示的，这个导航点击，路由还能跳转

img

  • 写回答

2条回答 默认 最新

  • 归来巨星 新星创作者: 前端开发技术领域 2022-01-18 17:00
    关注

    参照element tabs 改一下吧

    评论

报告相同问题？

  • Vue.js+cube-ui（Scroll组件）实现类似头条效果的横向滚动导航条
    2020-10-16 19:07
    在前端开发中，横向滚动导航条是一种常见的交互形式，它允许用户通过滑动来浏览多个导航项，尤其适用于移动端项目，因为手机屏幕宽度有限，无法像PC端一样显示很长的导航条。实现横向滚动导航条可以提高用户体验，...
  • vue中封装菜单栏Menu组件
    2021-12-20 11:01
    coding_于宴的博客 选中高亮底部条 切换子组件时菜单项的选中 刷新页面时菜单项的选中 实现代码： <div v-for="(item,index) in navList" :key="item.name"> <div class="navItem" @click="go(item.path, index)" :class...
  • Vue3-封装一个导航栏组件
    2021-09-13 12:02
    丹丹呀～～的博客 在Vue3中封装一个导航栏组件，并且实现，随着滚动条滚动实现一个吸顶效果 导航栏组件的效果图： 滚动条滚动以后的吸顶效果示意图： 具体代码展示： <template> <header class="app-header"> ...
  • 鼠标横向滚动条和鼠标滚动方向
    2024-07-31 16:50
    DTcode7的博客 通过上述示例，我们可以看到如何有效地实现鼠标横向滚动条和检测鼠标滚动方向，并将其应用于实际项目中。在 Web 页面设计中，横向滚动条是指当页面的内容宽度超出视口宽度时出现的滚动条。希望您在这里可以感受到一...
  • android 横向滚动 导航,仿今日头条横向滚动导航栏--原生js
    2021-05-26 07:10
    羽漾月辰的博客 其实就是实现横向滑动，进行选择。原理：鼠标按下，获取当前鼠标坐标，作为起始坐标；鼠标移动，获取坐标，与起始坐标进行一系列的数学运算；给 left 赋值，改变位置；移动过多，超过时进行处理。function ...
  • Vue3实战笔记（20）—封装头部导航组件
    2024-05-14 11:05
    ~山花~的博客 Vue 3 封装头部导航栏有助于提高代码复用性、统一风格、降低维护成本、提高可配置性和模块化程度，同时还可以实现动态渲染等功能，有利于项目开发和维护。封装头部导航栏可以确保整个项目的导航栏风格一致，提升用户...
  • 在vue中原生封装一个步骤条组件
    2021-06-22 17:03
    凌云的视界的博客 在项目中我们经常会遇到需要实现进度条、步骤条的效果，因此我在vue中封装了一个效果如上图的步骤条组件。 一、在src/components下新建一个process组件 1.html部分 <div class="showProcess"> <ul> &...
  • vue项目中滚动时导航吸顶效果(固定定位)
    2021-07-16 22:06
    奥特曼　的博客 什么是吸顶?... useWindowScroll() 是@vueuse/core提供的api可返回当前页面滚动时候滚动条的 x横向，y纵向 vue3.0组合API提供了更多逻辑代码封装的能力。@vueuse/core 基于组合API封装好用的工具函数。
  • vue中使用递归组件创建导航菜单
    2021-04-29 11:21
    前端61的博客 概念 组件在它的模板内可以递归的调用自己，只要给组件设置...在父组件中定义一个要递归的数据（list数组），通过props传递给子组件 const vm = new Vue({ el: '#app', data: { msg: '我是来自父组件数据', list:
  • 【原生实现横向步骤条，横向时间条】
    2022-09-10 16:17
    sun sun sun的博客 实现原生横向步骤条弄完了才知道el-steps 已经满足了需求，也懒得换上去，记录一下代码。
  • 没有解决我的问题, 去提问

问题事件

  • 已结题 （查看结题原因） 1月21日
  • 创建了问题 1月18日