Question

我使用了一次又一次加载数据的单页。

正在使用同一页面加载数据;即标题，照片和描述。你可以帮助我，以便我可以在其中应用滑动功能吗？我正在构建像Pulse News这样的应用程序，在刷卡功能上检查它。我已经在phonegap，HTML5，CSS3和JavaScript以及jQuery mobile中构建了它。

我知道如何刷页面，其中有多个页面，但只有一个页面动态加载数据，只有内容被更改，所以我应该如何添加滑动以便它可以工作iPhone和Android？

Answer 1

您的应用中有多少页面无关紧要。您需要检测活动中的SWIPE操作并重新加载数据，而不是真正刷页面。要做到这一点：在您的触摸事件监听器中，检测：

ACTION_MOVE

像这样：

if（event.getAction（）！= MotionEvent.ACTION_MOVE）

甚至检查距离以确保SWIPE发生：

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

然后计算距离，如果听起来不仅仅是点击......请将其视为滑动并重新加载数据祝你好运

Answer 2

看看Hammer.js（http://eightmedia.github.io/hammer.js/）或许它会让你更轻松！

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

Answer 3

我认为您可能需要考虑使用多页面布局或面板，并使用滑动手势在它们之间进行转换。

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

在此处查看jQueryMobile幻灯片对话框的代码 - http://view.jquerymobile.com/1.3.0/docs/widgets/transitions/

Answer 4

来自$.mobile.changePage

的jQuery Mobile 1.3.0文档

选项（对象，可选）属性：

allowSamePageTransition(boolean, default: false)

默认情况下，changePage（）忽略对的请求切换到当前活动页面。允许将此选项设置为true 要执行的请求。开发人员应该注意一些页面转换假定changePage的fromPage和toPage 请求不同，因此它们可能无法按预期动画。开发商负责提供适当的过渡或转弯它适用于这个具体案例。

似乎可能存在一些错误，具体取决于您使用的jQuery.Mobile版本。

Answer 5

首先让你的Activity实现OnTouchListener 然后返回手势检测器，如下所示

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

然后现在

urpage.setOnTouchListener(this);

onCreate方法中的

下一步

创建一个名为GestureListener的类在那

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 6

AngularJS 1.2现在也具有内置的滑动功能。也许值得一试。

Answer 7

您可以根据需要修改此代码。

  $("#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'. 
  });

在单页面上应用触摸滑动，该页面是用于动态加载数据的页面吗？

7 个答案: