天道酬勤,学无止境

Sencha Touch/HTML5 Swipe event/effect from left to right

I try to do a swipe event/effect from left to right in Sencha Touch or HTML5. So if the HTML page runs on iOS then it should start an animation if the user touche ans moves/swipe with the finger from the left to the right on the screen.

Any ideas how this can be done 'easily'?

评论

If I understood you correctly, you want to switch content if the user swipes the screen to either left/right. I believe the easiest approach is to use a Carousel. Please have a look at the Sencha Touch Kitchen Sink example (User Interface -> Carousel): http://dev.sencha.com/deploy/touch/examples/kitchensink/

Below is a code example taken from the Kitcen Sink that demonstrates the use of a Carousel:

new Ext.Panel({
    cls: 'cards',
    layout: {
        type: 'vbox',
        align: 'stretch'
    },
    defaults: {
        flex: 1
    },
    items: [{
        xtype: 'carousel',
        items: [{
            html: '<p>Navigate the carousel on this page by swiping left/right.</p>',
            cls: 'card card1'
        },
        {
            html: '<p>Clicking on either side of the indicators below</p>',
            cls: 'card card2'
        },
        {
            html: 'Card #3',
            cls: 'card card3'
        }]
    }]
});

You can add gesture swipe event something like this.

tabpanel.element.on('swipe', function(e) {
  if(e.direction === 'left') {
    // left slide event here
  }
  if(e.direction === 'right') {
    // right slide event here
  }
  if(e.direction === 'up') {
    // up slide event here
  }
  if(e.direction === 'down') {
    // down slide event here
  }
}, tabpanel);

Hope this help you.

Hmm... So, in a carousel, what if one wants to capture that swipe event, when a user actually swipes the screen, from left to right or viceversa... and capture that data as well, which direction it was swiped?

受限制的 HTML

  • 允许的HTML标签:<a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • 自动断行和分段。
  • 网页和电子邮件地址自动转换为链接。

相关推荐
  • 如何识别所有4个方向的滑动(How to recognize swipe in all 4 directions)
    问题 我需要使用滑动来识别向下然后向右的滑动手势。 但是在快速的UISwipeGestureRecognizer上已经确定了正确的方向。而且我不知道如何将此方向用于其他方向。 回答1 每个方向都需要一个UISwipeGestureRecognizer 。 UISwipeGestureRecognizer.direction因为UISwipeGestureRecognizer.direction属性是选项样式的位掩码,但是每个识别器只能处理一个方向。 您可以根据需要将它们全部发送到同一个处理程序,并在那里进行排序,或者将它们发送到不同的处理程序。 这是一个实现: override func viewDidLoad() { super.viewDidLoad() let swipeRight = UISwipeGestureRecognizer(target: self, action: #selector(respondToSwipeGesture)) swipeRight.direction = .right self.view.addGestureRecognizer(swipeRight) let swipeDown = UISwipeGestureRecognizer(target: self, action: #selector(respondToSwipeGesture)
  • Android ListView左右滑动以接受和拒绝(Android ListView Swipe Right and Left to Accept and Reject)
    问题 我想开发一个列表视图,当从左向右滑动时-在左角显示一个接受(true)图标(不可单击-从左向右滑动时仅显示颜色变化),如以下屏幕截图所示: 当我从左向右滑动时,它将接受(称为“接受” API),当我从右向左滑动时,它将显示如下内容: 这是在iOS中完成的,但是我找不到在Android中的实现方式,因此尝试了Google搜索,但找不到我想要的东西。 我尝试了以下示例:http://www.tutecentral.com/android-swipe-listview/ 但是在该示例中,当我从左向右滑动和从右向左滑动时,调用了相同的onOpened(..)方法,因此,弄不清楚何时调用accept和何时调用reject API会造成混淆,因为在任何类型上都调用了相同的方法刷卡 并且我还希望仅当我左右左右滑动时才显示接受(左侧)和拒绝(右侧)图像,但是当我抬起手指时,它们必须消失并且应该显示整个ListView (切勿同时显示两个侧面图像)。 因此,请任何人帮助我了解如何执行此操作。 我的问题有些令人困惑,但是我不知道如何解释整个动画,所以我尝试像上面那样解释。 如果有人可以帮助我,将不胜感激。 回答1 解决方案编号1: 您必须遵循以下步骤才能“接近”您的功能, 包装您的ListView的适配器 像下面这样: protected void onCreate(Bundle
  • Android 滑动更改片段不起作用(Android Swipe to change fragments not working)
    问题 我正在尝试制作一个应用程序,用户可以在其中滑动并更改他们在屏幕上看到的片段。 我不能使用视图寻呼机,因为我希望用户能够永远滑动到不同的片段。 这是我的片段中的检测器: class MyGestureDetector extends SimpleOnGestureListener { @Override public boolean onDown(MotionEvent e) { return true; } @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE & Math.abs(velocityX) > 10) { left(); } else if (e2.getX() - e1.getX() > SWIPE_MIN_DISTANCE & Math.abs(velocityX) > 10) { right(); } return false; } @Override public boolean onScroll(MotionEvent e1, MotionEvent e2, float distanceX, float
  • Android ListView Swipe Right and Left to Accept and Reject
    I want to develop a list view that when swiped left to right - displays in the left corner an accept (true) icon (non clickable - show just a color change when swiping left to right), like the following screen shot: When I swipe from left to right it will accept (calling 'accept' API), and when I swipe right to left it will display something like this: This is done in iOS, but I can't find how to do this in Android, I tried googling but couldn't find exactly what I want. I tried the following example: http://www.tutecentral.com/android-swipe-listview/ but in that example, when I swipe left to
  • 如何检测左/右和上/下之间的滑动方向(How to detect swipe direction between left/right and up/down)
    问题 我的问题:如何检测用户何时上下左右移动手指(以及如何知道用户手指向哪个方向移动)? 我的情况:当用户上下移动手指时,我想更改其应用程序的亮度(向上=较亮,向下=较暗),并且我想根据其向左/向右滑动在活动和/或视图之间进行切换。 回答1 我为此编写了一个简单的类:有据可查,因此我在这里不作解释 public class OnSwipeListener extends GestureDetector.SimpleOnGestureListener { @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { // Grab two events located on the plane at e1=(x1, y1) and e2=(x2, y2) // Let e1 be the initial event // e2 can be located at 4 different positions, consider the following diagram // (Assume that lines are separated by 90 degrees.) // // // \ A / // \ / // D e1 B // / \
  • 添加UIGestureRecognizer以从左向右从右向左滑动我的视图[重复](Add UIGestureRecognizer to swipe left to right right to left my views [duplicate])
    问题 这个问题已经在这里有了答案: 使用滑动手势进行视图导航(5个答案) 7年前关闭。 我有一个具有不同UIViewControllers的UIStoryboard,我想添加另一个UIViewController (如仪表板),当用户从左侧滑动ipad时,仪表板将出现,然后向后滑动时,将恢复当前视图。 这可能吗? 如果是,则有任何提示该怎么做或UIGestureRecognizer任何好的教程? 谢谢你。 回答1 UISwipeGestureRecognizer * swipeleft=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swipeleft:)]; swipeleft.direction=UISwipeGestureRecognizerDirectionLeft; [self.view addGestureRecognizer:swipeleft]; //向右滑动 UISwipeGestureRecognizer * swiperight=[[UISwipeGestureRecognizer alloc]initWithTarget:self action:@selector(swiperight:)]; swiperight.direction
  • ViewPager禁止向特定方向滑动(ViewPager disable swiping to a certain direction)
    问题 我想禁用滑动,但仅限右侧。 我在此答案中找到了可行的解决方案。 不幸的是,这复制了整个ViewPager源以实现目标。 是否有任何方法仅继承现有类而不进行复制? 回答1 我不确定这是否正是您所需要的:我需要一个viewpager用于一个向导,该向导的最大页面用户无法通过它。 最后,解决方案在适配器中。 我更改了PagerAdapter的计数,并以此方式阻止用户传递最大页面: @Override public int getCount() { return mProgress; //max page + 1 } 当用户进入下一页时: private void setWizardProgress(int progress) { if(progress > mProgress) { mProgress = progress; mWizardPagerAdapter.notifyDataSetChanged(); } } 这样,当用户进入最大页面时,他无法向右滚动。 回答2 这是有效的ViewPager类,可以禁用任何方向分页。 在这里查看所有答案。 public class CustomViewPager extends ViewPager { private float initialXValue; private SwipeDirection direction; public
  • 无法在Appium iOS测试上滑动(Cannot swipe on appium iOS test)
    问题 在文档中,appium为java提供了以下选项: JavascriptExecutor js = (JavascriptExecutor) driver; HashMap<String, Double> swipeObject = new HashMap<String, Double>(); swipeObject.put("startX", 0.01); swipeObject.put("startY", 0.5); swipeObject.put("endX", 0.95); swipeObject.put("endY", 0.5); swipeObject.put("duration", 1.8); js.executeScript("mobile: swipe", swipeObject); 我将其集成到了测试中,但是在导航到可以进行滑动的屏幕之后,使用滑动的方法将无法执行操作...在失败异常面板中,我收到以下错误:“ org.openqa.selenium。 WebDriverException:尚未实现”。 我想从左向右滑动,但还没有找到其他解决方案... 更新:我已经设法通过使用以下代码来刷卡: HashMap scrollObject = new HashMap();{{ scrollObject.put("direction", "left"); }}; (
  • UISwipeGestureRecognizer的设置方向(Setting direction for UISwipeGestureRecognizer)
    问题 我想在基于视图的iPhone项目中添加简单的滑动手势识别。 应该识别所有方向(右,下,左,上)的手势。 在UISwipeGestureRecognizer的文档中进行了说明: 您可以通过使用按位或操作数指定多个UISwipeGestureRecognizerDirection常量来指定多个方向。 默认方向是UISwipeGestureRecognizerDirectionRight。 但是对我来说这是行不通的。 对所有四个方向进行“或”运算后,只能识别左右滑动。 - (void)viewDidLoad { UISwipeGestureRecognizer *recognizer; recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(handleSwipeFrom:)]; [recognizer setDirection:(UISwipeGestureRecognizerDirectionRight | UISwipeGestureRecognizerDirectionDown | UISwipeGestureRecognizerDirectionLeft | UISwipeGestureRecognizerDirectionUp)]; [[self view]
  • 使用 Leap Motion 检测滑动手势方向(Detecting swipe gesture direction with Leap Motion)
    问题 我正在尝试使用 javascript API 通过 Leap Motion 简单地获取滑动手势的方向。 我的代码是: $(document).ready(function() { controller = new Leap.Controller("ws://localhost:6437/"); listener = new Leap.Listener(); listener.onFrame = function(controller) { var frame = controller.frame(); var hands = frame.hands(); var pointables = frame.pointables(); var gestures = frame.gestures(); $("#rotationAxis").text(pointables.length); $("#gestureDetected").text(gestures[0]); } controller.addListener(listener); controller.enableGesture("swipe", true); listener.onConnect = function(controller) { // calibrate = new Leap.Calibrate
  • Add UIGestureRecognizer to swipe left to right right to left my views [duplicate]
    This question already has answers here: Views Navigation Using Swipe Gesture (5 answers) Closed 7 years ago. I have a UIStoryboard with different UIViewControllers, I would like to add another UIViewController (like a dashboard) that when the user swipe the ipad from left the dashboard will appear then when he swipe back the current view will be restored. Is this possible? if yes any hint how to do it or any good tutorials for UIGestureRecognizer? thank you.
  • 角度ui.bootstrap.carousel从$ scope调用next()/ prev()(angular ui.bootstrap.carousel call next()/prev() from $scope)
    问题 如何从幻灯片访问轮播的next()/ prev()方法? 我正在尝试连接hm-swipe-left / right,但是我似乎没有正确的$ scope <carousel interval="1000"> <slide ng-repeat="card in slides" active="card.active"> <div class="card list-unstyled text-center"> <ul class='header list-inline list-unstyled' hm-swipe-left="swipe('next')" hm-swipe-right="swipe('prev')"> <li><i class="icon {{card.icon}} fa-3x"></i></li> <li class="title">{{card.title}}</li> </ul> </div> </slide> </carousel> 回答1 这是一个稍微简单的解决方案: Javascript控制器 $scope.carouselNext = function() { $('#carousel-main').carousel('next'); } $scope.carouselPrev = function() { $('#carousel-main')
  • Create Simple gesture for swipe left to right and right to left
    I want to create simple swipe gestures between two activity ,i have searched a lot got something like below.But my doubt is how could i swipe the activity or view using swipe gesture!! class MyGestureDetector extends SimpleOnGestureListener { @Override public boolean onFling(MotionEvent e1, MotionEvent e2, float velocityX, float velocityY) { try { if (Math.abs(e1.getY() - e2.getY()) > SWIPE_MAX_OFF_PATH) return false; // right to left swipe if(e1.getX() - e2.getX() > SWIPE_MIN_DISTANCE && Math.abs(velocityX) > SWIPE_THRESHOLD_VELOCITY) { Toast.makeText(SelectFilterActivity.this, "Left Swipe"
  • UIImageView上的手势识别器(滑动)(Gesture recognizer (swipe) on UIImageView)
    问题 当我使用此代码在UIImageView上滑动时,我尝试使用NSLog,但是由于某些原因它不起作用。 任何想法 ? @implementation ViewController - (void)viewDidLoad { [super viewDidLoad]; UIImage *image = [UIImage imageNamed:@"image2.png"]; UIImageView *imageView = [[UIImageView alloc] initWithImage:image]; imageView.frame = [[UIScreen mainScreen] bounds]; [self.view addSubview:imageView]; UISwipeGestureRecognizer *recognizer = [[UISwipeGestureRecognizer alloc] initWithTarget:self action:@selector(rightSwipeHandle:)]; [recognizer setNumberOfTouchesRequired:1]; [imageView addGestureRecognizer:recognizer]; } - (void)rightSwipeHandle
  • 列表视图项目向左滑动和向右滑动? [关闭](List view item swipe left and swipe right? [closed])
    问题 关门了。 这个问题需要细节或明确性。 它当前不接受答案。 想改善这个问题吗? 添加详细信息,并通过编辑此帖子来澄清问题。 7年前关闭。 改善这个问题 列表视图项目可以响应向左滑动和向右滑动吗? 如果是这样,如何应用android向左或向右滑动以打开不同的意图? 我希望在默认情况下像在android的联系人视图中拨打电话或留言一样。 谢谢 回答1 尝试这个: navigaList.setOnTouchListener(swipeDetector); navigaList.setOnItemClickListener(listener); OnItemClickListener listener = new OnItemClickListener() { @Override public void onItemClick(AdapterView<?> arg0, View arg1, int position, long arg3) { if(swipeDetector.swipeDetected()) { if(swipeDetector.getAction() == Action.RL) { } else { } } }; SwipeDetector.java public class SwipeDetector implements View.OnTouchListener
  • 检测触摸设备上的向左/向右滑动,但允许向上/向下滚动(Detect left/right-swipe on touch-devices, but allow up/down-scrolling)
    问题 我需要检测左右滑动并对其做出反应,但想让用户能够在同一元素上滚动,只要他只向左/向右移动手指,最大上下移动X像素即可,它不应该滚动,但是当他超过X时,它应该滚动。 所以我做的是: var startX, startY, $this = $(this); function touchmove(event) { var touches = event.originalEvent.touches; if (touches && touches.length) { var deltaX = touches[0].pageX - startX; var deltaY = touches[0].pageY - startY; if (Math.abs(deltaY) > 50) { $this.html('X: ' + deltaX + '<br> Y: ' + deltaY + '<br>TRUE'); $this.unbind('touchmove', touchmove); return true; } else { $this.html('X: ' + deltaX + '<br> Y: ' + deltaY); event.preventDefault(); } } } function touchstart(event) { var touches = event
  • how to make my viewpager swipe from right to left
    I have a viewpager and it contains some information but it lets me swipe the pages from left to right how can I make it swipe from left to right which means change its direction?
  • 如何使我的viewpager从右向左滑动(how to make my viewpager swipe from right to left)
    问题 我有一个viewpager,它包含一些信息,但是它允许我从左向右滑动页面,如何使其从左向右滑动,这意味着改变方向? 回答1 我认为您可以使用viewPager.setCurrentItem()将当前页面设置为最后一页。 然后它将从左向右滑动.. :) 回答2 更改Viewpager的滑动方向是非常简单的技术。 您必须遵循两个简单的步骤, 1.更改“查看”寻呼机的旋转方式, viewpager.setRotationY(180); 2.然后再次更改作为viewpager子级的片段容器的方向, recyclerView.setRotationY(180); 注意:就我而言,我已将recyclerview用作视图分页器的子级。 这对我来说是100%的工作。 回答3 您已经可以在两个方向上滑动了。 默认情况下,它显示第零页,但是您可以更改它: protected void onCreate(Bundle savedInstanceState) { // ... viewPager.setCurrentItem(myFragmentCount-1); // ... 回答4 我确定它与操作无关,但是我找到了一个对我有用的解决方案(因为修改数据对我而言是个问题)。 我只是简单地将viewpager沿Y轴旋转了180度,然后又将其子视图旋转了180度。 android.view.View
  • Xamarin形式向左/向右滑动手势(Xamarin Forms Swipe Left/Swipe Right Gestures)
    问题 我想通过说我对移动开发,Xamarin,C#和.Net完全陌生。 我正在使用Xamarain Forms创建移动应用程序,但至少根据我所看到的文档,我遇到了无法使用滑动手势的问题。 我找到了这个网站:http://arteksoftware.com/gesture-recognizers-with-xamarin-forms/ 这说明了如何为IOS / Android添加一些其他手势,以便在表单的上下文中可以访问这些手势。 在尝试遵循此步骤之前,我想看看是否有人在Xamarin Forms应用程序中实现了滑动,以及他们是如何做到的。 我的目标是必须有一个水平的堆栈布局。 此布局包含7个按钮,每个按钮反映了当前星期中的一天。 向左滑动堆栈布局会将按钮的文本更改为上一周。 向右轻扫会将按钮的文本更改为下一周。 因此,我也尝试为此使用MVVM和XAML。 那么我可以分开向左滑动和向右滑动动作吗? 我想使用ICommand根据滑动方向将某个参数传递给函数。 此示例或任何建议的任何示例将不胜感激。 回答1 Xamarin.Forms引入了SwipeGestureRecognizer: <BoxView Color="Teal" ...> <BoxView.GestureRecognizers> <SwipeGestureRecognizer Direction="Left"
  • 通过iPhone和Android上的JavaScript检测手指滑动(Detect a finger swipe through JavaScript on the iPhone and Android)
    问题 您如何使用JavaScript在网页上检测到用户向某个方向滑动手指? 我想知道是否存在一种适用于iPhone和Android手机上的网站的解决方案。 回答1 简单的原始JS代码示例: document.addEventListener('touchstart', handleTouchStart, false); document.addEventListener('touchmove', handleTouchMove, false); var xDown = null; var yDown = null; function getTouches(evt) { return evt.touches || // browser API evt.originalEvent.touches; // jQuery } function handleTouchStart(evt) { const firstTouch = getTouches(evt)[0]; xDown = firstTouch.clientX; yDown = firstTouch.clientY; }; function handleTouchMove(evt) { if ( ! xDown || ! yDown ) { return; } var xUp = evt.touches[0].clientX