Onsen UI Vue swipeable Tabbar Doesn't work
-
i used this template to start
https://github.com/OnsenUI/vue-cordova-webpack
and then i add a tabbar its ok but the swipeable attribute doesn’t work when i run the code i can click tabs and its work but swipe doesn’t work
i can swipe in the onsen ui demo so my browser is ok
here is my Tabbar component
<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>
-
@Milad-dE Just update
onsenui
andvue-onsenui
dependencies.
-
@Fran-Diox said:
@Milad-dE Just update
onsenui
andvue-onsenui
dependencies.i update them but the problem still exist
"onsenui": "~2.6.1", "vue-onsenui": "~2.2.0"
-
@Milad-dE Can you see a slide animation when you change tabs? Or is it instant? Moreover, what happens if you add
animation="fade"
to the tabbar?
-
when i putt attr animation on tabbar object
it fix the problem<v-ons-tabbar position="auto" animation="fade" swipeable :tabs="tabs" :visible="true" :index.sync="activeIndex" > </v-ons-tabbar>
-
@Milad-dE Do you get a fade animation? Does the swipe work normally when including that attribute? :confused: