关于Vant中Tab嵌套Tab的滑动问题，如何解决？

Vant2 中实现 父tab中嵌套子tab, 并开启手势滑动后，达到连贯滑动的效果，也就是子tab滑动到尽头后父tab再滑动

现在的问题是， 子tab滑动时，同时切换了父tab, 手势冲突

代码如下：

<template>
  <div>
    <van-tabs
      v-model="currentOne"
      :animated="true"
      line-width="20"
      swipeable
      sticky
    >
      <van-tab v-for="(tab, index) in tab_one" :title="tab.title" :key="index">
        <van-tabs
          v-model="currentTwo"
          :animated="true"
          line-width="20"
          swipeable
          sticky
        >
          <van-tab
            v-for="(tab, index) in tab_two"
            :title="tab.title"
            :key="index"
          >
            <div class="test">123456</div>
            <div class="test">123456</div>
            <div class="test">123456</div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

export default {
  data() {
    return {
      tab_one: [
        {
          title: "测试1",
        },
        {
          title: "测试2",
        },
        {
          title: "测试3",
        },
      ],
      tab_two: [
        {
          title: "子分类1",
        },
        {
          title: "子分类2",
        },
        {
          title: "子分类3",
        },
        {
          title: "子分类4",
        },
        {
          title: "子分类5",
        },
        {
          title: "子分类6",
        },
        {
          title: "子分类7",
        },
      ],
      currentOne: 0,
      currentTwo: 0,
    }
  },
}

.test {
  height: 500px;
  background-color: brown;
}

看下是不是因为向上冒泡原因，在事件后加.stop阻止冒泡

给个解决方法的建议：在父和子tab分别做滑动的监控方法（可以百度一下，应该就是touchmove这类字眼的监控）然后动态切换父和子的swipeable属性控制谁可以手势滑谁禁用手势滑（关键点：父和子对应区域的touchmove能区别开）

通过swipeable属性 控制界面的滑动效果

<template>
  <div>
    <van-tabs
      v-model="currentOne"
      :animated="true"
      line-width="20"
      :swipeable="oneSwipeable"
      sticky
    >
      <van-tab v-for="(tab, index) in tab_one" :title="tab.title" :key="index">
        <van-tabs
          v-model="currentTwo"
          :animated="true"
          line-width="20"
          :swipeable="twowipeable"
          sticky
        >
          <van-tab
            v-for="(tab, index) in tab_two"
            :title="tab.title"
            :key="index"
          >
            <div class="test">123456</div>
            <div class="test">123456</div>
            <div class="test">123456</div>
          </van-tab>
        </van-tabs>
      </van-tab>
    </van-tabs>
  </div>
</template>

 
export default {
  data() {
    return {
      tab_one: [
        {
          title: "测试1",
        },
        {
          title: "测试2",
        },
        {
          title: "测试3",
        },
      ],
      tab_two: [
        {
          title: "子分类1",
        },
        {
          title: "子分类2",
        },
        {
          title: "子分类3",
        },
        {
          title: "子分类4",
        },
        {
          title: "子分类5",
        },
        {
          title: "子分类6",
        },
        {
          title: "子分类7",
        },
      ],
      currentOne: 0,
      currentTwo: 0,
      oneSwipeable: false,
      twoSwipeable: true,
    }
  },
methods: {
        onechage(name, title) {
          console.log(name, title, "===oneSwipeable ");
          if (this.oneswipeable) {
              this.oneSwipeable = false;
            }
        },
        twochage(name, title) {
          console.log(name, title, "===twochage",this.tab_two.length - 1, name,'===');
          if (this.tab_two.length - 1 == name||0 == name) {
            this.oneSwipeable = true;
          } 
        },
      },
}

可以试一下写成组件形式调用

定义成不同类名调用