Onsen UI Vue 可滑动的 Tabbar 不起作用

Question

我用这个模板开始

https://github.com/OnsenUI/vue-cordova-webpack

然后我添加了一个标签栏，它没问题，但可滑动属性不起作用当我运行代码时，我可以单击选项卡并正常工作，但滑动不起作用

我可以在温泉刷卡ui 演示所以我的浏览器没问题

这是我的 Tabbar 组件

<template>
  <v-ons-page>
    <v-ons-toolbar>
      <div class="center">{{ title }}</div>
    </v-ons-toolbar>

    <v-ons-tabbar
      swipeable position="auto"
      :tabs="tabs"
      :visible="true"
      :index.sync="activeIndex"
    >
    </v-ons-tabbar>
  </v-ons-page>
</template>


<script>
import Dashboard from './components/dashboard.vue';
import Diary from './components/diary.vue';

export default {
  data () {
    return {
      activeIndex: 0,
      tabs: [
        {
          label: 'dash',
          page: Dashboard,
          icon: this.md() ? null : 'ion-ios-settings',
          key: "Dashboard"
        },
        {
          label: 'diar',
          page: Diary,
          icon: this.md() ? null : 'ion-ios-settings',
          key: "Diary"
        }
      ]
    };
  },
  methods: {
    md() {
      return this.$ons.platform.isAndroid();
    }
  },
  computed: {
    title() {
      return this.tabs[this.activeIndex].label;
    }
  }
};
</script>

Answer 1

确保您至少使用 onsenui@2.6.0 和 vue-onsenui@2.2.0。更新日志 here. If possible, just update to the latest version. Check package.json file and change the version numbers or, if you are using yarn，只是运行 yarn upgrade onsenui vue-onsenui.

Answer 2

当我在标签栏对象上放置 attr 动画时它解决了问题

 <v-ons-tabbar
   position="auto"
   animation="fade"
   swipeable 
  :tabs="tabs"
  :visible="true"
  :index.sync="activeIndex"
>
</v-ons-tabbar>

其他社区的Fran Dios帮我做的所以我打赏

Onsen UI Vue 可滑动的 Tabbar 不起作用

Onsen UI Vue swipeable Tabbar Doesn't work

javascript

cordova

onsen-ui

vue.js

vuejs2