记录基于vue的可滚动导航以及视图切换的实现

最新推荐文章于 2024-06-20 00:07:34 发布

原创

最新推荐文章于 2024-06-20 00:07:34 发布 · 2.2k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#导航

本文记录了基于Vue实现可滚动导航和视图切换的过程，包括导航滑动、点击切换视图和置顶功能。通过监听触摸事件，使用transform:translate实现滑动，而非overflow-x:scroll。文章中给出了部分页面结构和逻辑处理代码，虽未考虑粘滞阻力，但仍对滑动区域进行了限制。

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

上一篇文章介绍了一个好用的组件ly-tab，可以用于滑动、自动定位的导航，但是无法配置图标，比如我想做成下面这种效果，就没有可以配置的选项，查看了改组件的文档发现，导航底部固定的时候无法滚动。
本来是想在源码的基础上改改的，但自己能力太薄弱，感觉不好改，于是我就借助作者写这个组件的思路，写了一个类似的功能出来，目前还没封装，也有一点小bug，不过已经满足了UI的需求了哈哈，下面看效果图。
看完下面的图，大概知道需要实现的功能有哪些：
1.导航栏中的item大于视图可见区域的时候可以滑动；
2.点击导航的时候切换视图；
3.置顶功能，将任意item置顶显示。
我们一个个来分析：
一导航可以滑动：
这里需要注意，不是通过overflow-x:scroll来实现导航滑动，而是使用transform:translate;来实现
参考作者的思路：

this.$el监听touchstart、touchmove和touchend事件；
touchstart时记录touch的初始位置startX(event.touches[0].clientX)，也就是触点距屏幕左侧的距离；
touchmove时记录此时touch位置currentX(event.touches[0].clinetX)，那么从touchstart到此次touchmove或者上一次touchmove到该次touchmove手指的移动距离为currentX- startX，然后让内容区的translateX += currentX - startX使内容区跟随手指移动，接着将currentX的值赋给startX作为下一次touchmove计算的初始位置；

此外作者还考虑了粘滞阻力，我没有考虑这点，效果可能没有那么好。
虽然没有考虑粘滞阻力，但是还是对用户可滑动的区域做了限制
部分页面结构代码

<template>
  <div>
    <div class="navbar-box">
      <ul
        ref="viewBox"
        @touchstart="touchStart($event)"
        @touchmove="touchMove($event)"
        @touchend="touchEnd($event)"
        :style="style"
      >
          <li v-for="(item,index) in tabs">
            <div
                 :key="index"
                 class="itembox"
                 @click="getCurrentItem(item,index)"
                 :