I'm using padilicious to detect swiping gestures for web pages that will be viewed on iOS and desktops. It works great to swipe left/right for previous and next pages of my site. However, it seems to override the default behavior in iPhone/iPad when swiping up/down. I'd like an up/down swipe to scroll the page, which it does when I don't have padilicious running. Just having the code ignore up/down swipes doesn't seem to work.
The section of padilicious code that I've been
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
document.location = document.getElementById('nextPage').href;
} else if ( swipeDirection == 'right' ) {
document.location = document.getElementById('prevPage').href;
} else if ( swipeDirection == 'up' ) {
return;
} else if ( swipeDirection == 'down' ) {
return;
}
}
The swipe event is triggered when the user press down and swipes over an element horizontally by more than 30px (and less than 75px vertically). Tip: You can swipe in both right and left direction.
To detect swipe left in React Native, we can use the react-native-swipe-gestures package. To install it, we run npm i react-native-swipe-gestures . to add the GestureRecognizer component which wraps around any component we want to detect swipes for. Then we set the onSwipe prop to the onSwipe function.
Remove event.preventDefault();
from all functions. In the function processingRoutine() {}
add event.preventDefault();
for what you want.
function processingRoutine() {
var swipedElement = document.getElementById(triggerElementID);
if ( swipeDirection == 'left' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'orange';
event.preventDefault();
} else if ( swipeDirection == 'right' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'green';
event.preventDefault();
} else if ( swipeDirection == 'up' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'maroon';
} else if ( swipeDirection == 'down' ) {
// REPLACE WITH YOUR ROUTINES
//swipedElement.style.backgroundColor = 'purple';
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With