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

admin管理员组

文章数量:1290949

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?

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?

• javascript
• android
• iphone
• cordova
• jquery-mobile

Share Improve this question Follow edited Feb 23, 2013 at 10:16 lambda 3,38511 gold badge2727 silver badges3232 bronze badges asked Sep 15, 2012 at 11:00 Akash MalhotraAkash Malhotra 38711 silver badge1212 bronze badges 5

• Hi! Could you provide some code? – Littm Commented Sep 15, 2012 at 11:03
• In swipe gesture action block just reload the page..... – Venk Commented Sep 15, 2012 at 11:56
• Check the answers to this: stackoverflow./q/8110736/190695 – Nirmal Patel Commented Sep 16, 2012 at 7:47
• I think this demo will help you out. check out. github./akotoe/android-slide-out-menu – GrIsHu Commented Mar 5, 2013 at 13:34
• Does re-setting the swipe delegate to the new element after each swipe not work? – Ivan Bartsov Commented Mar 6, 2013 at 8:30

Add a ment  | 

7 Answers 7

Sorted by: Reset to default 1

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

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
});

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./1.3.0/docs/widgets/pages/#Multi-pagetemplatestructure

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

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.

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;
}

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

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'. 
  });

本文标签：