上一篇文章介绍了一个好用的组件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="getC