Add touchAction to the manager...

[johnwebbcole]

I'm using a swipe left/right on an element that needs to scroll vertically. It seems that in order for this to work on iOS, I need to add the touchAction property to the manager. I'm a little unclear on how to do this. The README mentions two methods to configure recognizers, but doesn't go into detail on either.

How would one add the touchAction property per the instructions at http://hammerjs.github.io/touch-action/

[streusselhirni]

I managed to create a work-around for this issue:

• Clone the repository
• In index.js look for the line el.hammer = new Hammer.Manager(el) (somewhere around line 16)
• Change the line to el.hammer = new Hammer.Manager(el, { touchAction: 'pan-y' })
• Run npm run prepub
• Now just import the created index.min.js to your project and import VueHammer from there.

I know that this is a workaround which is not that nice, but I was in a hurry and thought I shared it. When I have time I will dive more into the code and maybe try a pull request to easily set touchAction.

[Akari1987]

I had same issue on android firefox. Using swipe left, it can't be vertical scrollable. I soleved this issue by bellow.

VueHammer.config.swipe = {
direction: 6,
};

hammerjs/hammer.js#1173
https://hammerjs.github.io/api/#constants

[orcen]

Hello, is the config for the whole App, and if, can it be set only for one component?

[jcroucher]

I had same issue on android firefox. Using swipe left, it can't be vertical scrollable. I soleved this issue by bellow.

VueHammer.config.swipe = {
direction: 6,
};

hammerjs/hammer.js#1173
https://hammerjs.github.io/api/#constants

Where did you put this? In your main.js?
It seems to have no affect for me.

import { VueHammer } from 'vue2-hammer'
VueHammer.config.swipe = {
direction: 6,
}
Vue.use(VueHammer)

Edit: I ended up modifying the index.js as detailed by @streusselhirni

[ptandler]

I found another workaround: You can set the touch-action via CSS and !important - that will override the touch-action set by Hammer as style:
touch-action: pan-y !important;

[sebj54]

This is in fact really simple to do:

Step 1: Add a ref to to your slider element:

<div
    ref="slider"
    v-hammer:swipe.horizontal="onSwipe"
>
</div>

Step 2: Use the mounted hook to edit hammer instance:

export default {
    mounted() {
        this.$refs.slider.hammer.set({
            touchAction: 'pan-y',
        })
    },
}

@ptandler Yes this works by only setting CSS option, but support of this property is not really good (iOS > 13): https://caniuse.com/#search=touch-action

[paullacour]

Note to others: @sebj54 solution works on actual html elements, not vue components ;) (spend a few minutes figuring it out on a transition-group element)

[sebj54]

@paullacour You're right, if you set a ref on a Vue component you have to use this.$refs.slider.$el.hammer instead of this.$refs.slider.hammer in order to get the HTMLElement correctly.