在 Sencha Touch 中禁用轮播过度滚动/过度拖动

2024-01-22

在 Sencha Touch 2 轮播的末尾或开头,用户可以将项目拖过它应该能够到达的位置并显示白色背景(此处的屏幕截图:https://i.stack.imgur.com/i10Ak.png https://i.stack.imgur.com/i10Ak.png)。我正在尝试禁用此功能,因此用户can't拖过轮播的末尾/开头。

我尝试用各种方法来做到这一点scrollable配置,包括通常建议用于处理过度滚动的设置

scrollable : {
  direction: 'horizontal',
  directionLock: true,
  momentumEasing:  {
     momentum: {
       acceleration: 30,
       friction: 0.5
     },
     bounce: {
        acceleration: 0.0001,
        springTension: 0.9999,
     },
     minVelocity: 5
  },
  outOfBoundRestrictFactor: 0   
  }

上面的配置,特别是outOfBoundRestrictFactor确实阻止了拖动超过末尾的能力,但它也阻止了拖动轮播中其他任何地方的能力......所以这是行不通的。我已经尝试了所有其他配置,但没有产生任何积极效果。

不幸的是,我还没有找到太多关于修改拖动配置的信息。这里的任何帮助都会很棒。


你需要做的是覆盖onDrag轮播中的功能。这是逻辑检测用户拖动方向的位置,以及您可以检查它是第一个还是最后一个项目的位置。

这是一个完全符合您要求的课程。您感兴趣的代码位于该函数的底部。其余的只是简单地摘自Ext.carousel.Carousel.

Ext.define('Ext.carousel.Custom', {
    extend: 'Ext.carousel.Carousel',

    onDrag: function(e) {
        if (!this.isDragging) {
            return;
        }

        var startOffset = this.dragStartOffset,
            direction = this.getDirection(),
            delta = direction === 'horizontal' ? e.deltaX : e.deltaY,
            lastOffset = this.offset,
            flickStartTime = this.flickStartTime,
            dragDirection = this.dragDirection,
            now = Ext.Date.now(),
            currentActiveIndex = this.getActiveIndex(),
            maxIndex = this.getMaxItemIndex(),
            lastDragDirection = dragDirection,
            offset;

        if ((currentActiveIndex === 0 && delta > 0) || (currentActiveIndex === maxIndex && delta < 0)) {
            delta *= 0.5;
        }

        offset = startOffset + delta;

        if (offset > lastOffset) {
            dragDirection = 1;
        }
        else if (offset < lastOffset) {
            dragDirection = -1;
        }

        if (dragDirection !== lastDragDirection || (now - flickStartTime) > 300) {
            this.flickStartOffset = lastOffset;
            this.flickStartTime = now;
        }

        this.dragDirection = dragDirection;

        // now that we have the dragDirection, we should use that to check if there
        // is an item to drag to
        if ((dragDirection == 1 && currentActiveIndex == 0) || (dragDirection == -1 && currentActiveIndex == maxIndex)) {
            return;
        }

        this.setOffset(offset);
    }
});
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

在 Sencha Touch 中禁用轮播过度滚动/过度拖动 的相关文章

  • Bootstrap:带有键盘控件的轮播

    有人能够用键盘控制实现 Twitter Bootstrap 轮播吗 我知道这将在下一个版本中实现 但现在我想知道你们中是否有人能够使其工作 这是我当前的代码
  • Sencha touch 2:在itemTpl中获取项目索引

    在XTemplate的文档中 可以使用 来获取当前数组索引 当我在 xlist 的 itemTpl 中使用它时 我总是得到 1 而不是索引 xtype list store myStore itemTpl new Ext XTemplate
  • 如何删除默认的 Bootstrap 3 轮播控件背景渐变?

    我很确定这是我需要修改的代码 但由于某种原因我无法让渐变在 IE 中消失 我要他们彻底消失 carousel control text shadow none opacity 1 filter alpha opacity 100 carou
  • Xamarin 表单中的轮播视图自动滑动

    我的页面底部有一个轮播视图 现在我希望图像每 2 秒自动滚动一次 我已经实现了相同的并且工作正常 Device StartTimer TimeSpan FromSeconds 2 gt SlidePosition if SlidePosit
  • Sencha Touch 2 事件:绘制与展示?

    我有一个关于show事件 在我的应用程序中我正在处理painted我的小组的事件是这样的 Ext define mvcTest controller Test extend Ext app Controller config refs pa
  • 轮播引导程序不起作用

    有人可以帮助我吗 我正在测试引导轮播 但它不起作用 具体来说 上一张 下一张按钮不起作用 轮播不会滑到下一张幻灯片 这是我页面的代码 但我不知道我做错了什么
  • Bootstrap 轮播可以仅旋转部分幻灯片吗?

    我有一个直接来自引导站点的香草轮播 carousel carousel interval 2000 它有 5 张幻灯片和 5 个指标 1 2 3 A B 我希望轮播能够自动循环播放幻灯片 1 2 和 3 然后重复 但是 如果我单击幻灯片 A
  • Sencha Touch 动画选项

    在哪里可以找到 Ext Panel show 的可用动画类型列表 我搜索了文档并用谷歌搜索了 sencha touchanimation options 但找不到任何东西 你可以在这里看到所有的动画 http dev sencha com
  • Angular 与 ui.bootstrap 渲染空白页面

    我使用 Yeoman 创建了一个包含 bootstrap 的 Angular 应用程序 然后 我使用 Bower 按照自述文件中的说明安装 ui bootstraphttps github com angular ui bootstrap
  • sencha 中的按钮背景颜色

    我是 sencha touch 的新手 我们如何将按钮的背景颜色更改为白色 我有一个按钮 每个角都有两个图像 我希望按钮是纯白色的 我尝试使用这样的CSS quest background url images quest jpg no r
  • 如何设计轮播点样式?

    我如何将我的旋转木马点设计成这样 这是我现在所拥有的 这是我的风格 slick dots position absolute bottom 45px list style none display block text align cent
  • 无法访问 sencha 中整个控制器的全局变量

    我一直在尝试访问一个控制器内的全局值 但无法访问它 我一直在关注这个如何在sencha中定义全局变量 https stackoverflow com questions 18095037 how to define global varia
  • Sencha Touch - Google 地图并将标记居中

    是我一个人的问题还是谷歌地图 API 似乎有点奇怪 尝试简单地显示某些坐标的标记 然后将屏幕置于标记的中心 在我的控制器中从视图触发 onGoogleMapRender function googleMap var long record
  • 利用 Bootstrap Carousel“slide”事件和 .next 类

    所以我遇到了一个小问题 类似于我前几天发布的这个问题 http bit ly 11JpbdY http bit ly 11JpbdY 在加载时隐藏的一段内容上使用 SlabText 这次 我试图让slabText 更新滑块中某些内容的显示
  • 猫头鹰旋转木马 2 内部引导手风琴仅适用于窗口大小调整?

    我正在使用猫头鹰旋转木马 2 我想在 Bootstrap Accordion 面板内加载 Owl Carousel 我的代码是这样的 HTML 代码 div class panel group users block accordion d
  • 图像在幻灯片上旋转

    我正在使用引导轮播插件来幻灯片显示照片 问题是有些图像旋转了 90 度 有什么办法可以解决这个问题吗 这是 HTML div class container div class row div class col md 8 col md o
  • Bootstrap 轮播的固定高度和宽度

    我正在使用引导程序轮播 但我想要固定的宽度和高度 以便我的所有图像都会自动适应定义的高度和宽度 有人可以帮助我实现这一目标吗 div class row div class span8 div class carousel slide ol
  • 如何修改移动设备和选项卡的引导轮播

    我正在使用引导滑块 在桌面上 它有三张幻灯片 每张幻灯片有 4 个图块 在选项卡上 它们必须是 4 张幻灯片 每张幻灯片 3 个图块 在移动设备上 需要有 12 张不同的幻灯片 我正在考虑实现这一点的最有效和最优化的方法 Option 1
  • Sencha Touch、OpenLayers、GeoServer:使用 Android 2.2 的设备上的编码错误

    我使用创建了一个小测试页面煎茶触摸 开放层我正在从一个接收 WMS WFS 数据地理服务器 我已将 HTML 页面上的编码设置为 UTF 8 我使用以下语句从 GeoServer 中提取一些 WFS 数据 var post new Open
  • Bootstrap 轮播图像不按比例缩放

    我的轮播填充了页面的宽度 但是当我缩小窗口时 y 轴没有响应 一探究竟here http sacgamehub com index html 如何保持原始图像比例 保留轮播中所有图像的明确尺寸 它应该可以正常工作

随机推荐

  • 如何以 Symfony 形式制作 RadioButton?

    我有必须用 Symfony Form 重做的表单 但我坚持在这个地方 div class currency label div
  • 从 C# 打开新的 Outlook 邮件

    我希望从我的程序中生成 Outlook 消息 我能够从程序中构建和发送或构建并保存 我想要的是构建然后显示以允许用户从 AD 列表中手动选择收件人 下面的代码是此处示例和其他教程站点的混合 但是我找不到一个只是构建然后 显示 电子邮件而不保
  • Xcode 4 使用不同的配置设置构建静态库依赖项

    我想知道是否可以使用不同的配置设置编译依赖的静态库 我的情况是我有一个项目 project pbxproj 它依赖于静态库 cocoa touch 项目 libStatic pbxproj 我的项目有 3 个配置设置 例如调试 发布和临时配
  • 将列表转换为 pandas 中的日期时间

    我有福尔 熊猫列表 str jan 1 jan 15 feb 1 feb 15 mar 1 mar 15 apr 1 apr 15 may 1 may 15 jun 1 jun 15 jul 1 jul 15 aug 1 aug 15 se
  • 如何在 Android 上停止 HttpURLConnection 连接

    我使用 AsyncTask 连接 URLPath 如下代码所示 Override public void onCreate Bundle savedInstanceState super onCreate savedInstanceStat
  • 从任何活动中打开侧栏应用程序启动器

    我是 Android 开发新手 我正在考虑创建一个示例启动器应用程序来替换 Android 默认启动器 我已经创建了这个启动器 但我面临几个问题 1 单击 应用程序 按钮后 我将显示设备上安装的所有应用程序 但应用程序图标的大小不同 我尝试
  • 如何将遗传算法与一些启发式算法相结合

    我正在研究大学调度问题并为此使用简单的遗传算法 实际上它效果很好 可以在 1 小时内将目标函数值从 0 优化到 90 大约 但随后这个过程会急剧减慢 需要几天时间才能得到最佳解决方案 我看到很多论文认为将其他算法与遗传算法混合是合理的 请您
  • ASP.NET MVC 自定义路由约束、依赖注入和单元测试

    关于这个话题 我又问了一个问题 ASP NET MVC 自定义路由约束和依赖注入 https stackoverflow com questions 8308642 asp net mvc custom route constraints
  • 如何使用网络音频 API 播放声音文件 Safari?

    我正在修改一个脚本来播放我在 Codepen 上找到的 mp3 以使其能够在 Safari 上运行 在 Firefox 和 Chrome 中它工作正常 但 Safari 抱怨 未处理的承诺拒绝 类型错误 没有足够的参数 索引 html 25
  • 尝试安装biopython后Conda返回未找到属性错误符号

    我正在尝试让biopython工作 似乎我在这个过程中破坏了conda 此时 将显示 conda 的帮助菜单 并且conda version回报conda 4 7 5但其他任何事情包括conda info抛出错误AttributeError
  • 在树枝中显示货币符号

    如何在树枝中显示货币符号 我保存了符号的数值 例如 for EURO 8364 for DOLLAR 36 当我渲染这些值时 被转换为 amp 并且货币符号不显示 任何想法将不胜感激 谢谢 为了做得好 你必须添加一个function htt
  • 使用knitr生成复杂的动态文档

    最小的可重现的示例 RE 下面是我尝试弄清楚如何使用knitr用于生成复杂的动态文档 这里的 复杂 不是指文档的元素及其布局 而是指非线性逻辑底层 R 代码块 虽然提供的 RE 及其结果表明solution 基于这种方法可能效果很好 我会喜
  • 如何使用 Jenkins Workflow 插件进行 SCM 轮询

    在普通的自由式项目中 我将 SCM 插件配置为指向我想要发布的 Git 存储库 并启用 轮询 SCM 选项 这允许我配置一个 Stash webhook 来告诉 Jenkins 每当有更改时到那个仓库 这样 只要将更改推送到存储库 就可以触
  • 我可以在 Microsoft hyper-v 虚拟机中运行 Android Studio(Android SDK 模拟器)吗?

    我可以在 Microsoft hyper v 虚拟机中运行 Android Studio 和 Android SDK 模拟器吗 请仔细阅读 我已经经常将 Hyper V 用于其他目的 现在我需要开发一个Android应用程序 我已经安装了新
  • 一天地理编码服务调用次数过多

    我在使用 google 地图地理编码功能时收到此错误消息 据我所知 当我超过一天 2500 个请求的免费限制时 就会发生这种情况 不过 我已经设置了一个计费选项来为额外的请求支付额外费用 但我仍然收到此错误 当我设置账单时 它要求我创建一个
  • 共享服务中的私有主题与公共只读主题

    我已经开始开发一个 Angular 8 项目 其中两个兄弟组件必须交换数据 到目前为止 方法是在父服务中拥有一个 EventEmitter 然后 子组件调用这些发射器上的发射方法 将数据传递给其他同级组件 这是一个示例案例 共享服务 不好
  • Jekyll 帖子未生成

    我正在尝试向 Jekyll 网站添加新帖子 但运行时无法在生成的页面上看到它jekyll serve 无法生成 Jekyll 帖子的常见原因有哪些 该帖子未放置在 posts 目录 当您更改collections dir在你的配置中 默认
  • 我的 docker 容器有多少个 CPU?

    我正在编写一个并行运行的库 该库经常在 docker 容器中使用 我想启动与我的 docker 容器分配的核心一样多的线程 docker 是否将 CPU 限制设置为环境变量 例如 如果我的用户在创建容器时设置了两个 CPU docker r
  • 使用 Scala 新动态类型的动态代理

    是否可以使用 Scala 新的动态类型功能创建类似 AOP 的拦截器 例如 是否可以创建一个通用的秒表拦截器 可以与任意类型混合来分析我的代码 或者我仍然需要使用 AspectJ 吗 我相当确定Dynamic仅当您选择的对象尚不具有您选择的
  • 在 Sencha Touch 中禁用轮播过度滚动/过度拖动

    在 Sencha Touch 2 轮播的末尾或开头 用户可以将项目拖过它应该能够到达的位置并显示白色背景 此处的屏幕截图 https i stack imgur com i10Ak png https i stack imgur com i