Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

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: