uniapp项目标签导航的滑动切换

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

上一篇文章中我们引入了uView组件库中的tab标签导航组件并且监听了标签切换的时候的index值，接下来我们将实现滑动不同的内容tab标签页也跟着变化。

• 这里我们需要使用swiper以及scroll-view这两个uniapp的原生组件，我们给swiper绑定一个swiperChange方法用来监听他滑动的页面变化，这个部分的样式代码如下所示：

<swiper class="pic" :current="swiperCurrent" @change="swiperChange">
      <swiper-item>
        <scroll-view
          v-for="(item, index) in list2"
          :key="index"
          class="title"
          scroll-y="true"
        >
          <view class="img0" @click="tapImg(item.id)">
            <img class="img" :src="item.img" alt="" />
            <view class="name">{{ item.name }}</view>
          </view>
        </scroll-view>
      </swiper-item>

• 我们给swiperChange事件传递一个e，然后console.log打印一下这个e，会发现e的值如下图所示：

• 我们可以发现e.detail.current就是对应的滑动页数的index，所以我们只需要将tab标签导航栏的index.index索引号与这个e.detail.current两个相等就可实现滑动内容的时候tab标签导航页也跟着改变，我们先在tab标签改变的change方法里面的index.index赋值给this.current，然后将this.current与滑动内容里的swiperChange中的e.detail.current相等即可，具体的实现代码如下所示：

 swiperChange(e) {
      this.current = e.detail.current;
    },
    change(index) {
      console.log(index.index);
      this.current = index.index;
      this.swiperCurrent = index.index;
    },

这样我们在滑动下面的内容的时候tab标签导航也会随之而变化。

• 然后我们需要给这个图片一个跳转事件，并且携带参数跳转到之前以及做好的文章详情页，具体的跳转代码如下所示：

clickPic(e) {
      uni.navigateTo({
        url: "../../tabbar-3-detial/tabbar-3-release/newsDetail?id=" + e,
      });
    },