Open johnwebbcole opened 5 years ago
I managed to create a work-around for this issue:
index.js
look for the line el.hammer = new Hammer.Manager(el)
(somewhere around line 16)el.hammer = new Hammer.Manager(el, { touchAction: 'pan-y' })
npm run prepub
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.
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, };
https://github.com/hammerjs/hammer.js/issues/1173 https://hammerjs.github.io/api/#constants
Hello, is the config for the whole App, and if, can it be set only for one component?
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
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;
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
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)
@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.
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/