首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Sencha Touch --在数据视图中旋转还是水平滚动?

Sencha Touch 是一个用于创建跨平台移动应用的框架,它基于HTML5和CSS3技术,可以实现高性能的移动应用开发。在数据视图中,Sencha Touch支持旋转和水平滚动两种方式。

旋转是指将数据视图按照一定的角度进行旋转展示,可以实现横向和纵向的展示效果。这种方式适用于需要展示大量数据或者需要呈现复杂布局的场景。旋转可以通过CSS3的transform属性来实现,具体可以参考Sencha Touch的文档和示例。

水平滚动是指将数据视图以水平方向进行滚动展示,可以实现左右滑动切换内容的效果。这种方式适用于需要展示多个页面或者需要实现类似轮播图的效果。水平滚动可以通过Sencha Touch提供的组件和方法来实现,具体可以参考Sencha Touch的文档和示例。

总结起来,Sencha Touch在数据视图中既支持旋转展示,也支持水平滚动展示,具体使用哪种方式取决于开发者的需求和设计。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

HTML5移动端开发的常用触摸事件

触摸事件(touch)会在用户手指放在屏幕上面的时候、屏幕上滑动的时候或者是从屏幕上移开的时候出发。...(返回当事件被触发时,鼠标指针的水平坐标)、clientY(返回当事件触发时,鼠标指针的垂直坐标)、screenX(当某个事件被触发时,鼠标指针的水平坐标)和screenY(返回当某个事件被触发时,鼠标指针的垂直坐标...changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。 每个Touch对象包含的属性如下。   clientX:触摸目标口中的x坐标。   ...clientY:触摸目标口中的y坐标。   identifier:标识触摸的唯一ID。   pageX:触摸目标页面中的x坐标。   pageY:触摸目标页面中的y坐标。   ...pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。

1.6K10

JS中的touch事件与canvas绘图

Touch对象属性 所有属性均为只读属性。 Touch.identifier 此 Touch 对象的唯一标识符. 一次触摸动作(我们指的是手指的触摸)平面上移动的整个过程中, 该标识符不变....Touch.clientX 触点相对于可见区(visual viewport)左边沿的的X坐标. 不包括任何滚动偏移....Touch.clientY 触点相对于可见区(visual viewport)上边沿的的Y坐标. 不包括任何滚动偏移. Touch.pageX 触点相对于HTML文档左边沿的的X坐标....当存在水平滚动的偏移时, 这个值包含了水平滚动的偏移. Touch.pageY 触点相对于HTML文档上边沿的的Y坐标. 当存在垂直滚动的偏移时, 这个值包含了垂直滚动的偏移....Touch.rotationAngle 它是这样一个角度值:由radiusX 和 radiusY 描述的正方向的椭圆,需要通过顺时针旋转这个角度值,才能最精确地覆盖住用户和触摸平面的接触面.

7.3K41

分享WordPress Mobile Pack汉化精简版及隐藏指定插件更新提示的方法

妈妈说,文章内容不一定要赞,但是标题绝对要长,俺还是很听话的.......Enterily rebuilt to use Sencha Touch for the mobile web application and a separate admin panel....Enterily 修复使用 Sencha Touch 的移动 Web 应用程序和一个单独的管理面板。 NO backwards compatibility with v1.2.5....不知道是本人洋文水平太低,还是眼拙,翻了半天没找到二级域名绑定功能了,要你何用? 直接删之,恢复刚刚备份的 1.2.5 版,中文界面看着就是舒服啊! ? ?...于是 WP 大学找来相应的屏蔽方法,且继续往下看: 方法很简单,编辑主题目录的 function.php 主函数文件,找个位置插入如下代码,保存即可: /** * 隐藏WordPress Mobile

1.6K30

CSS 中 关于 Overflow ,你需要了解的这些知识点!

但是,可以使用 Javascript 滚动内容。 Scroll ? 在上图中,无论内容是否长,滚动条总是可见的。注意,这取决于操作系统。...Auto auto这是一个聪明的关键字,仅当内容比其容器长时才显示滚动条。 ? 注意,图中,只有当内容比其容器长时,滚动条才可见。...touch:使用具有回弹效果的滚动, 当手指从触摸屏上移开,内容会继续保持一段时间的滚动效果。继续滚动的速度和持续的时间和滚动手势的强烈程度成正比。同时也会创建一个新的堆栈上下文。...水平滚动问题 通常,我们会遇到水平滚动的问题,当原因未知时,滚动滚动会变得更加困难。 本节中,我将列出水平滚动的一些常见原因,以便大家以后构建布局时可以想到到它们。...Firefox scroll标签 Firefox中,会向导致水平滚动的元素添加一个小标签。 ? 删除元素 有时,上述技术无效。

3.9K20

Android layout属性大全

)保存View的数据            android:filterTouchesWhenObscured所在窗口被其它可见窗口遮住时,是否过滤触摸事件            android:keepScreenOn...某元素的右边          android:layout_toStartOf本元素从某个元素开始          android:layout_toEndOf本元素某个元素结束       ...android:scrollbarThumbVertical设置垂直滚动条的drawable          android:scrollbarTrackHorizontal设置水平滚动条背景(轨迹)...设置水平滚动条是否含有轨道          android:scrollbarAlwaysDrawVerticalTrack 设置垂直滚动条是否含有轨道          android:nextFocusLeft...        android:rotationX水平旋转度数         android:rotationY垂直旋转度数         android:scaleX设置X轴缩放

2.1K90

iOS 传感器集锦

Touch ID 功能。...、摇一摇、计步器、游戏、特效动画 加速计和运动传感器主要监测设备X、Y、Z轴上的加速度 ,根据加速度数值,就可以判断出在各个方向上的作用力度,陀螺仪主要用来监测设备的旋转方向和角度。...这几个传感器都是依赖于苹果官方CoreMotion框架,用法都差不多,先判断各个传感器是否可用开启,然后设置各个传感器的采集频率,接着就开始采集数据,并返回采集到的运动信息参数:各个方向的重力加速度、旋转方向角度等等...[网络图片.png] [网络图片.jpg] 示例效果:图片旋转的第一张图片用于检测设备是否处于水平位置,第二张图是设备无论竖直/水平方向上怎么旋转,图片都保持于水平/竖直方向垂直。...滚动小球不仅用了加速计,还用到了CoreMotion框架中行为管理CMMotionManager中的碰撞、重力行为,和动力学属性:摩擦、密度、弹力、阻力等 [图片旋转.png] [滚动小球.gif] 运动传感器的示例代码如下

1.5K80

提高效率 |ArcGIS Pro 中所有快捷键一网打尽

单击以从数据逐步缩小。 V + 拖动 围绕一点旋转。 按住 V 键同时单击并拖动,以围绕您单击的枢轴点旋转。 V + 方向键 围绕视图中旋转。...单击以从数据逐步缩小。V + 拖动围绕一点旋转。按住 V 键同时单击并拖动,以围绕您单击的枢轴点旋转。V + 方向键围绕视图中旋转。...加号 (+) 或 Ctrl+滚动鼠标滚轮 放大。 放大该地图。 减号 (-) 或 Ctrl+滚动鼠标滚轮 缩小。 缩小地图。 Z+水平移动光标或 Z+滚动鼠标滚轮 更改 z 值。...Shift+Z+水平移动光标或 Shift+滚动鼠标滚轮 加快 z 的变化速度。 按住 Shift 并转动鼠标滚轮。...Ctrl+滚动鼠标滚轮 放大或缩小表的比例。 Ctrl+0 将表的比例重置回 100%。 Shift+滚动鼠标滚轮 水平滚动表窗口。 Ctrl+F 显示查找和替换命令。

80520

iOS 传感器集锦

Touch ID 功能。...、摇一摇、计步器、游戏、特效动画 加速计和运动传感器主要监测设备X、Y、Z轴上的加速度 ,根据加速度数值,就可以判断出在各个方向上的作用力度,陀螺仪主要用来监测设备的旋转方向和角度。...这几个传感器都是依赖于苹果官方CoreMotion框架,用法都差不多,先判断各个传感器是否可用开启,然后设置各个传感器的采集频率,接着就开始采集数据,并返回采集到的运动信息参数:各个方向的重力加速度、旋转方向角度等等...网络图片.png 网络图片.jpg 示例效果:图片旋转的第一张图片用于检测设备是否处于水平位置,第二张图是设备无论竖直/水平方向上怎么旋转,图片都保持于水平/竖直方向垂直。...滚动小球不仅用了加速计,还用到了CoreMotion框架中行为管理CMMotionManager中的碰撞、重力行为,和动力学属性:摩擦、密度、弹力、阻力等 图片旋转.png 滚动小球.gif 运动传感器的示例代码如下

1.4K60

进入移动Web世界

简而言之,就是通过touch,监听touchstart和tarchend,如果两者间隔较短,例如100ms甚至更短,且起始位置的偏移量极小,控制几个像素之内,那么就判定为点击事件。...因此还是推荐第一种解决方案,不会出现拆东墙补西墙或者说捉襟见肘的问题。当然,如果使用框架库的话,大部分强大的库默认都解决了这个问题,不用开发者再为此操心。...每个touch对象包含属性 clientX:触摸目标口中的横坐标 clientY:触摸目标口中的纵坐标 identifier:标识触摸的唯一id pageX:触摸目标页面中的横坐标(含滚动)...pageY:触摸目标页面中的纵坐标(含滚动) screenX:触摸目标屏幕中的横坐标 screenY:触摸目标屏幕中的纵坐标 target:触摸的DOM节点的目标 d....但与此同时,要注意随之产生的一个问题,就是组织默认事件后,页面也会随之禁止滚动,因此看情况使用。

1K20

Android高级图片滚动控件,编写3D版的图片轮播器

对图片进行立体操作还是要使用到Camera技术,如果你对这个技术还不太熟悉,可以到网上搜一些相关资料,或者参考我前面的一篇文章:Android中轴旋转特效实现,制作别样的图片浏览器 。...mDx, getHeight() / 2); canvas.drawBitmap(mBitmap, mMaxtrix, null); } } } /** * 在这里计算所有旋转所需要的数据...然后还提供了一个setRotateData()方法,用于设置当前图片的下标和滚动距离,有了这两样数据就可以通过computeRotateData()方法来计算旋转角度的一些数据,以及通过isImageVisible...接下来当图片需要绘制到屏幕上的时候就会调用onDraw()方法,onDraw()方法中会进行判断,如果当前图片可见就调用computeRotateData()方法来计算旋转时所需要的各种数据,之后再通过...,当手指离开屏幕时会距离当前滑动的距离和速度来决定,是滚动到下一张图片,还是滚动到上一张图片,还是滚动回原图片。

3.9K81

Android高级图片滚动控件实现3D版图片轮播器

这里我们将思维发散一下,允许一个界面上同时显示三张图片,再通过Camera的方式对左右的两张图进行3D旋转,这样就能制作出一种立体的图片轮播器了,原理示意图如下所示: ?...对图片进行立体操作还是要使用到Camera技术,如果你对这个技术还不太熟悉,可以到网上搜一些相关资料,或者参考我前面的一篇文章:Android实现中轴旋转特效 Android制作别样的图片浏览器 。...然后还提供了一个setRotateData()方法,用于设置当前图片的下标和滚动距离,有了这两样数据就可以通过computeRotateData()方法来计算旋转角度的一些数据,以及通过isImageVisible...接下来当图片需要绘制到屏幕上的时候就会调用onDraw()方法,onDraw()方法中会进行判断,如果当前图片可见就调用computeRotateData()方法来计算旋转时所需要的各种数据,之后再通过...,当手指离开屏幕时会距离当前滑动的距离和速度来决定,是滚动到下一张图片,还是滚动到上一张图片,还是滚动回原图片。

3.2K10

【IOS开发基础系列】UIScrollView专题

就是当用户滚动时,这些对象应该恰当的增加或者移除子视图。          因为滚动视图没有滚动条,它必须知道一个触摸信号是打算滚动还是打算跟踪里面的子视图。...而前面所说的时,中断touch-down事件,和取消touch事件是俩码事,所以当快速子视图上移动的时候,当然可以滚动。...为了检测touch是处理还是传递,UIScrollView当touch发生时会生成一个timer。         ...(如当你touch一个table, 停止了一会,然后开始scrolling,那一行就首先被highlight,但是随后就不在高亮了)         滚动过程当中,其实是修改原点坐标。...directionalLockEnabled     默认是 NO,可以垂直和水平方向同时运动。当值是 YES 时,假如一开始是垂直或者是水平运动,那么接下来会锁定另外一个方向的滚动

41330

9 大跨平台移动 App 开发工具推荐

如今,移动应用开发已经变得越来越重要,开发人员面临最大的挑战之一就是多个平台上运行应用程序。...最新的应用程序代码支持“一次编写,到处运行”(WORA)的概念,即只要在一个平台上编写代码一次,就可以多个平台运行。...6、手机上的 HTML5 框架 Sencha Touch ? Sencha Touch 是专门为移动设备开发应用的 Javascript 框架。...通过 Sencha Touch 你可以创建非常像 native app 的 web app,用户界面组件和数据管理全部基于 HTML5 和 CSS3 的 web 标准,全面兼容 Android 和 Apple...通过 MonoCross,你可以使用任何平台特定的 API 或 HTML5 来构建本机应用程序,以提供丰富的基于 Web 的功能,而且,不管是设备还是服务器上运行,都可以同时使用相同的业务逻辑和数据代码

5.7K20

一文彻底搞懂js中的位置计算

(options)方式调用,支持传入额外的配置: { left: number, top: number, behavior: 'smooth' | 'auto' // 平滑滚动还是默认直接滚动...scrollHeight 的值等于该元素不使用滚动条的情况下为了适应口中所用内容所需的最小高度。...例如,不论页面是否有垂直/水平滚动,当你点击客户端区域的左上角时,鼠标事件的 clientX/Y 值都将为 0 。...而offsetWidth/offsetHeight返回元素的布局宽度/高度,包含元素的边框(border)、水平线/垂直线上的内边距(padding)、竖直/水平方向滚动条(scrollbar)(如果存在的话...计算元素是否出现在口内 利用的还是元素距离口的位置小于口的大小。 注意即便变成了负值,那么也表示元素曾经出现过屏幕中只是现在不显示了而已。

3.7K10

javaScript — touch事件详解(touchstart、touchmove和touchend)

触摸事件(touch)会在用户手指放在屏幕上面的时候、屏幕上滑动的时候或者是从屏幕上移开的时候出发。...在这个事件发生期间,调用preventDefault()事件可以阻止滚动。 touchend事件:当手指从屏幕上离开的时候触发。 touchcancel事件:当系统停止跟踪触摸的时候触发。...(返回当事件被触发时,鼠标指针的水平坐标)、clientY(返回当事件触发时,鼠标指针的垂直坐标)、screenX(当某个事件被触发时,鼠标指针的水平坐标)和screenY(返回当某个事件被触发时,鼠标指针的垂直坐标...changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。 每个Touch对象包含的属性如下。 clientX:触摸目标口中的x坐标。...clientY:触摸目标口中的y坐标。 identifier:标识触摸的唯一ID。 pageX:触摸目标页面中的x坐标。 pageY:触摸目标页面中的y坐标。

1.7K20

移动端的touch事件处理

changeTouches:表示自上次触摸以来发生了什么改变的Touch对象的数组。每个Touch对象包含的属性如下。  clientX:触摸目标口中的x坐标。  ...clientY:触摸目标口中的y坐标。  identifier:标识触摸的唯一ID。  pageX:触摸目标页面中的x坐标。  pageY:触摸目标页面中的y坐标。         ...的list列表,一定的情况下,是和touches获取到的有区别的,但是我还是不能确定,这个区别到底是由什么因素引起,可以参考touch-14中的示例,但是并不能理解是什么原因导致的)。...changedTouches属性,按我的理解,就是事件变化时,才会出现这个属性,对于这个确切的说法,还是先看下面的这个例子之后,才能更好的理解了。...它的缺点就是有些过于的复杂,所以我还是会在条件允许的情况下使用原生的滚动

1.6K20

Ext JS 4预览:更快、更简单、更稳定

Ext JS 4预览版:更快、更简单、更稳定 上周SanFrancisco看,在哪里,我们很激动来自全球的500多Sencha开发者(放到以前应该叫ExtJs开发者)。...主题 ExtJS本身就有一套很漂亮的主题,但是ExtJS4中我们把它提升到另一个水平——"海王星"。这得益于现有主题的干净的设计,但是给我们的应用带来一个全可视的更加有光泽。...ExtJS我们已经大规模的升级了data包,难以置信新特性包括,模型之间的关系和保存数据到本地存储。...ExtJS4的data包可以和Sencha Touch,所以你当即就可以在你的应用程序中使用它了。我们有几个博客发布了介绍它的帖子。...这就使我们能够创建一些创建应用程序时所需要的难以置信的工具来帮助自动化设计和维护。使用新的架构创建应用变得容易得难以置信,你可以偷偷的看一下Sencha Touch的微博和Kiva的示例。

2.4K60

使用 CSS Scroll Snap 优化滚动,提升用户体验!

然而,这还不够,这不是一个可用的滚动容器。 滚动容器有什么问题 问题是,与滑动相比,它们并不能提供良好的体验。触摸屏上滑动手势的主要好处是,我们可以用一根手指水平或垂直滚动。...滚动容器的轴线 滚动容器的轴表示滚动方向,它可以是水平或垂直的,x值表示水平滚动,而y表示垂直滚动。...这意味着,滚动必须对齐到滚动容器的开始处。 在下图中,每次用户向右滚动时,浏览器都会将项目捕捉到容器的开头。...但是,如果该值是proximity,则浏览器将完成这项工作,它可能会吸附到定义的点(我们的例子中start)。注意,proximity 是默认值,但是为了清晰起见,我们这里还是声明一下它。...Scroll Snap Padding scroll-padding设置所有侧面的滚动边距,类似于padding属性的工作方式。 在下图中滚动容器的左侧有50px的内边距。

2.7K41
领券