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.0
和vue-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 可滑动标签栏不起作用的主要内容,如果未能解决你的问题,请参考以下文章