Home » Android » javascript – Apply Touch Swipe on single page ,the page that is used for loading data dynamically?

javascript – Apply Touch Swipe on single page ,the page that is used for loading data dynamically?

Posted by: admin May 14, 2020 Leave a comment

Questions:

I have used single page on which data is loaded again and again.

A same page is being used for loading data; ie headline, photo and description. Can you help me so that I can apply swipe function in it?
I am building an application like Pulse News check it on the swipe function.
I have built it in phonegap, HTML5, CSS3 and JavaScript and also jQuery mobile.

I know how to to swipe the pages, where are more than one page but there is only one page on which data is loaded dynamically and only the content is changed, so how should I add swipe to it so that it works on iPhone and Android?

How to&Answers:

It doesn’t matter how many pages you have in your app. You need to detect SWIPE action in your activity and reload data instead of really swiping pages. to do that:
in your touch event listener, detect:

ACTION_MOVE

like this:

if(event.getAction() != MotionEvent.ACTION_MOVE)

even check the distance to make sure a SWIPE happened:

switch(event.getAction())
 {
     case MotionEvent.ACTION_DOWN:
              if(isDown == false)
              {
                     startX = event.getX();
                     startY = event.getY();
                     isDown = true;
              }
              Break;
              case MotionEvent.ACTION_UP
              {
                     endX = event.getX();
                     endY = event.getY();
                     break;
          }
}

calculate the distance then, if sounds like more than a click… consider it a swipe and reload your data
good luck

Answer:

Take a look at Hammer.js (http://eightmedia.github.io/hammer.js/) perhaps it will make it easier for you!

Hammer(el).on("swipeleft", function() {
    //code to run when user uses swipes left
});

Answer:

I think you might want to consider using a multi-page layout or a panel and transitioning between them using the swipe gesture.

http://view.jquerymobile.com/1.3.0/docs/widgets/pages/#Multi-pagetemplatestructure

Check-out the code for the jQueryMobile slide dialog here – http://view.jquerymobile.com/1.3.0/docs/widgets/transitions/

Answer:

From the jQuery Mobile 1.3.0 Documentation for $.mobile.changePage

options (object, optional) Properties:

allowSamePageTransition(boolean, default: false)

By default, changePage() ignores requests to
change to the current active page. Setting this option to true, allows
the request to execute. Developers should note that some of the page
transitions assume that the fromPage and toPage of a changePage
request are different, so they may not animate as expected. Developers
are responsible for either providing a proper transition, or turning
it off for this specific case.

It appears that there may be some bugs with this depending on which version of jQuery.Mobile you are using.

Answer:

First let ur Activity implements OnTouchListener
then
return the gesture detector i.e as follows

public boolean onTouch(final View view, final MotionEvent motionEvent) {
  // TODO Auto-generated method stub
  return gestureDetector.onTouchEvent(motionEvent);
}

then
now

urpage.setOnTouchListener(this);

in onCreate method

Next

create a class called GestureListener
in that

private final class GestureListener extends SimpleOnGestureListener {

private static final int SWIPE_THRESHOLD = 100;
private static final int SWIPE_VELOCITY_THRESHOLD = 100;

@Override
public boolean onDown(MotionEvent e) {
    return true;
}

@Override
public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX,

float velocityY) {
    boolean result = false;
    try {
        float diffY = e2.getY() - e1.getY();
        float diffX = e2.getX() - e1.getX();
        if (Math.abs(diffX) > Math.abs(diffY)) {
             if (Math.abs(diffX) > SWIPE_THRESHOLD
               && Math.abs(velocityX) > SWIPE_VELOCITY_THRESHOLD) {
                  if (diffX > 0) {
                       //dynamic load the page which you want when the user swipes left side
                  } else {
                       //dynamic load the page which you want when the user swipes right side
                  }
             }
        }
    } catch (Exception exception) {
        exception.printStackTrace();
    }
    return result;
}

Answer:

AngularJS 1.2 has swipe features built in now too. Maybe worth checking.

Answer:

You can modify this code according your requirement.

  $("#pageID-1").on("swiperight", function() {           
    $.mobile.changePage("#pageID-2", {transition: "slide",reverse: false});         
    getDateienData();   // load data dynamically on page '#pageID-2' when swipe page '#pageID-1'. 
  });