nativescript-vue / nativescript-vue-navigator

A simple router for NativeScript-Vue, built on top of $navigateTo to simplify routing from within components
MIT License
98 stars 10 forks source link

Double tap navigates twice #57

Closed unremarkablegarden closed 4 years ago

unremarkablegarden commented 4 years ago

If I quickly tap a link twice, it opens the sub-page twice on top of each other. Need to tap "back" twice to get home again.

template: <StackLayout v-for='(post, index) in resources[path]' :key='index' @onTap='viewPost(post)'>

method:

viewPost(post) {
    this.$navigateTo(ItemDetails, {
        frame: 'navigator',
        props: {
            item: post,
            animated: true,
            type: 'news' 
        }
    }).catch(error => console.log(error))
},
rigor789 commented 4 years ago

If you tap twice - the event is fired twice, nothing that the Navigator should fix. In general, you need to debounce your viewPost method - there are many ways to do it, just look for js debounce or vue debounce method.

I would do something like (not tested this - only from memory):

npm install debounce

import debounce from 'debounce'

// ...

viewPost: debounce(function() {
    this.$navigateTo(ItemDetails, {
        frame: 'navigator',
        props: {
            item: post,
            animated: true,
            type: 'news' 
        }
    }).catch(error => console.log(error))
}, 200)