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>
    

  • Onsen UI

    @Milad-dE Just update onsenui and vue-onsenui dependencies.



  • @Fran-Diox said:

    @Milad-dE Just update onsenui and vue-onsenui dependencies.

    i update them but the problem still exist

            "onsenui": "~2.6.1",
            "vue-onsenui": "~2.2.0"
    

  • Onsen UI

    @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>
    

  • Onsen UI

    @Milad-dE Do you get a fade animation? Does the swipe work normally when including that attribute? :confused:


Log in to reply