Onsen UI Vue 可滑动标签栏不起作用

Posted

技术标签:

【中文标题】Onsen UI Vue 可滑动标签栏不起作用【英文标题】:Onsen UI Vue swipeable Tabbar Doesn't work 【发布时间】:2018-03-20 12:34:06 【问题描述】:

我用这个模板开始

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>

【问题讨论】:

【参考方案1】:

确保您至少使用了onsenui@2.6.0vue-onsenui@2.2.0。更新日志here。如果可能,只需更新到最新版本。检查package.json 文件并更改版本号,或者,如果您使用的是yarn,只需运行yarn upgrade onsenui vue-onsenui

【讨论】:

【参考方案2】:

当我在 tabbar 对象上放 attr 动画时 它解决了问题

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

其他社区的 Fran Dios 帮助我做到这一点,所以我给予奖励

【讨论】:

以上是关于Onsen UI Vue 可滑动标签栏不起作用的主要内容,如果未能解决你的问题,请参考以下文章

我的 UI 搜索栏不起作用/向其他站点发送请求

页面视图 + 隐藏导航栏不起作用

Angular Onsen UI Ajax call

是否可以为 onsen ui 2 添加 RTL 方向?

粘性导航栏不起作用

覆盖操作栏不起作用