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

Posted 2023-05-06

【中文标题】在单页上应用触摸滑动，用于动态加载数据的页面？

【英文标题】：Apply Touch Swipe on single page ,the page that is used for loading data dynamically?

【发布时间】：2012-09-08 08:15:08

【问题描述】：

我使用了单页，在该页面上一次又一次地加载数据。

正在使用同一页面加载数据；即标题、照片和说明。你能帮我，以便我可以在其中应用滑动功能吗？ 我正在构建一个像 Pulse News 这样的应用程序，在滑动功能上检查它。 我已经在 phonegap、html5、CSS3 和 javascript 以及 jQuery mobile 中构建了它。

我知道如何滑动页面，其中不止一页，但只有一页动态加载数据并且仅更改内容，所以我应该如何向其添加滑动以使其正常工作iPhone 和 android？

【问题讨论】：

嗨！你能提供一些代码吗？

在滑动手势动作块中只需重新加载页面.....

查看答案：***.com/q/8110736/190695

我认为这个演示会帮助你。退房。 github.com/akotoe/android-slide-out-menu

每次滑动后是否将滑动代理重新设置为新元素不起作用？

【参考方案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;
          

然后计算距离，如果听起来不仅仅是点击...考虑它是滑动并重新加载您的数据 祝你好运

【参考方案2】：

看看 Hammer.js (http://eightmedia.github.io/hammer.js/) 也许它会让你更轻松！

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

【参考方案3】：

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

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

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

【参考方案4】：

来自$.mobile.changePage 的 jQuery Mobile 1.3.0 文档

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

allowSamePageTransition(boolean, default: false)

默认情况下，changePage() 会忽略对 切换到当前活动页面。将此选项设置为 true，允许 要执行的请求。开发者应该注意一些页面 转换假设 changePage 的 fromPage 和 toPage 请求不同，因此它们可能无法按预期设置动画。开发者 负责提供适当的过渡或转向 对于这种特定情况，它关闭了。

根据您使用的 jQuery.Mobile 版本，这似乎可能存在一些错误。

【参考方案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;

【参考方案6】：

AngularJS 1.2 现在也内置了滑动功能。也许值得检查。

【参考方案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'. 
  );