vue在使用mint-ui的TabContainer功能时swipeable参数不知如何使用？

Question

1.在项目中使用mint-ui的TabContainer组件时，想要实现左右切换tab，swipeable参数不知如何使用？

<template>
    <div>
        <div class="nav">
            <mt-button size="small" @click="test('tab-container1')">tab 1</mt-button>
            <!--<mt-button size="small" @click="active = 'tab-container1'">tab 1</mt-button>-->
            <mt-button size="small" @click="test('tab-container2')">tab 2</mt-button>
            <mt-button size="small" @click="test('tab-container3')">tab 3</mt-button>
        </div>
        <div class="page-tab-container" >
            <mt-tab-container class="page-tabbar-tab-container" v-model="active" swipeable value="tab-container1">
                <mt-tab-container-item id="tab-container1" >
                    <mt-cell :key="n" v-for="n in 10" title="tab-container 1" ></mt-cell>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container2">
                    <mt-cell :key="n" v-for="n in 5" title="tab-container 2" ></mt-cell>
                </mt-tab-container-item>
                <mt-tab-container-item id="tab-container3" >
                    <mt-cell :key="n" v-for="n in 7" title="tab-container 3" ></mt-cell>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'page-tab-container',
        data() {
            return {
                active: "tab-container1",
                // swipeable: true
            };
        },
        methods:{
            test(id){
                this.active = id
                console.log(this.active)
            }
        }
    };
</script>

代码如上，如果没有swipeable这个参数，则能够点击切换，如果加上了，则可以切换，但是显示的有问题，并且点击切换也不行了。
请问应该如何才能既有点击切换又有左右滑动切换？谢谢

Answer 1

可以使用vue的watch监听mt-tab-container组件的参数并做相应的改变。

watch:{
  active:function (newValue) {
    // active即为mt-tab-container的参数，这里监听它的改变并可以做相关操作：
    // 在你的tabBar组件点击的时候更改active的值
    // 滑动mt-tab-container-item组件即更改active的值，监听newValue的变化并操作你的tabBar，使得点击切换和滑动切换相关联
  }
}

Answer 2

<mt-tab-container class="page-tabbar-tab-container" v-model="active" :swipeable='true' value="tab-container1">

Answer 3

楼主解决那个tab切换问题了吗？我也遇到了一样的问题，如果解决了可以分享一下吗？