uniapp项目标签导航的实现

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第32天，点击查看活动详情

上一篇文章中我们完成了搜索框的所有功能，接下来我们将实现如下图所示的标签导航的滑动切换，具体的样式如下图所示：

• 首先这个组件可以在uView组件库中找到，官方链接：www.uviewui.com/components/… ,我们使用那个可以自定义样式以及可以吸附在顶部的tab标签导航组件，复制粘贴源码到我们的页面上
• 这里u-tabs需要绑定一个current，用来确定点击的是第几个标签，绑定一个change方法，用来监听标签的改变，然后还要使用一个u-sticky，用来当用户拉到页面下面的时候把这个标签导航吸附到页面顶部，然后颜色是自定义颜色，我设置为了我们项目的主题颜色青色，具体的实现代码如下所示：

  <u-sticky class="item" bgColor="#fff">
      <u-tabs
        :current="current"
        @change="change"
        :list="list1"
        lineWidth="30"
        lineColor="#34e2a3"
        :activeStyle="{
          color: '#34e2a3',
          fontWeight: 'bold',
          transform: 'scale(1.05)',
        }"
      >
      </u-tabs>
    </u-sticky>

然后这里的list1需要我们在data中return定义一些标签数据，这些都定义完了之后我们的页面上就会出现这个标签导航了，但是我们会发现当用户不是点击标签切换内容而是滑动屏幕切换内容的时候，这个标签并不会随着用户的切换而改变，所以我们需要使用到swiper以及scroll-view这两个来实现标签导航的滑动切换

• 我们在change方法这里传递一个index然后console.log打印一下index.index，之后当我们点击标签切换的时候就会打印出index的值了。