有些时候需要在Flex界面中支持鼠标的滑轮滚动功能,比如通过滑轮滚的滚动来实现对某个Field的数值增加或者递减的功能。
实现的方法主要是利用MouseEvent.MOUSE_WHEEL事件。在Application中的creationComplete方法中增加以下语句:
systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel)
onMouseWheel事件处理器得到这个事件后,我们还需要监听是那个field支持而且触发了滚动事件。需要注意的是MouseEvent的currentTarget并不支持指出当前那个组件是被focus的。但是FocusManager可以帮忙:源代码如下:
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
creationComplete="systemManager.addEventListener(MouseEvent.MOUSE_WHEEL, onMouseWheel)"
>
<mx:TextInput id="t1"/>
<mx:TextInput id="t2"/>
<mx:TextArea id="t3"/>
<mx:Script>
<![CDATA[
import mx.managers.IFocusManagerComponent;
import mx.managers.SystemManager;
public function onMouseWheel (evt:MouseEvent): void {
var compAtFocus: IFocusManagerComponent = focusManager.getFocus();
// no wheel support unless it's a TextInput field
if (compAtFocus is TextInput){
var theValue:Number=Number(compAtFocus["text"]);
theValue += evt.delta;
compAtFocus["text"]=""+theValue;
}
}
]]>
</mx:Script>
</mx:Application>
例子中我们是检查了被focus的组件是否是TextInput,如果是执行递增或者递减的功能。如果不是比如TextArea类型的,就不具有这
个效果了。需要注意的,如果你的系统不支持滑轮滚动可能跟驱动有关,不是Flex的问题。如果你不喜欢例子中的增长或者递减数值,你可以替换掉delta
这个属性。
原创作者:
分享到:
相关推荐
在Flex布局中,我们可以有几种不同的方法来实现滚动条,尽管它们在技术上可能被视为一种实现,但可以以不同的样式呈现。下面我们将详细探讨这些方法。 1. **默认滚动条**: 在不进行任何自定义的情况下,浏览器会...
1. **TextLayout框架**:TextLayout是Flex 4引入的一个高级文本渲染库,支持复杂的文本格式化,如多语言、排版、字体嵌入等。它基于Apache Flex SDK,提供了更高效的文本处理能力,特别是在处理大量文本或复杂格式时...
本主题将深入探讨如何修改Flex4滚动条的皮肤,以改变Scroller组件的外观。 滚动条在用户界面中起着至关重要的作用,它允许用户浏览超出视口的内容。在Flex4中,Scroller组件是一个容器,它可以包含其他组件,并提供...
在"flexwheel flex实现的图片滚动效果"中,"flexwheel"组件利用了Flex布局的特性,如`display: flex`、`flex-direction`、`justify-content`和`align-items`等属性,来创建一个可滚动的图片轮播。这种轮播通常具有...
FLEX连续向左滚动字幕,可用于作公告栏展示。
在本例中,我们关注的是“Flex 拖动,滚动曲线图”,这涉及到Flex中的图表组件和用户交互功能。 首先,Flex中的曲线图,通常称为LineChart,是用于展示数据趋势的可视化工具。LineChart组件允许开发者将一系列数据...
Flex 按钮代替滚动条,看了就知道了。。
针对“flex横向条形图增加滚动条”的需求,我们需要创建一个包含条形图的Flex容器,并为其添加滚动条组件。在Flex中,我们可以使用`HScroller`组件来实现水平滚动条。这个组件会自动根据容器内容的宽度来调整其滚动...
2. **数据绑定**:Flex支持数据绑定,这意味着可以将图片URL与`Image`组件的`source`属性关联,从而动态改变显示的图片。这在处理多张图片时非常有用。 3. **ArrayCollection**:为了存储和管理多张图片的数据,...
Flex中不用ScrollBar实现滚动效果
自定义滚动条.用canvas做滚动条条 用button做滑块
flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex iframe 支持在flash中嵌套入html jsp asp php等flex...
在本文中,我们将深入探讨如何使用Adobe Flex技术创建一个具有左右滑动功能的图片墙。Flex是一种基于ActionScript 3(AS3)的开源框架,主要用于构建富互联网应用程序(RIA)。通过利用Flex,开发者可以轻松地创建...
【Flex 图片滚动】是一种在Web开发中使用Adobe Flex框架实现的动态图片展示技术,它允许用户以轮播或滑动的方式浏览多张图片。在本文中,我们将深入探讨基于Flex的图片轮换机制,以及如何通过源码实现这一功能。 一...
在Flex环境中,我们可以使用AS3(ActionScript 3)来实现这一功能,AS3提供了强大的图形和矩阵运算支持。 为了实现鼠标滚动时的缩放效果,我们需要监听鼠标的`scroll`事件。在Flex应用中,我们可以为舞台或者特定的...
Flex支持EaselJS库,这是一个强大的2D绘图API,虽然EaselJS本身不直接处理3D,但在Flex中可以通过组合多个2D变换模拟3D效果。这些变换包括旋转、缩放和位移,当应用于图片容器时,可以创建出环绕观众旋转的3D视觉...
这是因为Flex的ItemRenderer重用机制,当一个ItemRenderer不再可见(被滚动出视口)时,它会被复用到其他位置,如果没有正确处理选中状态,就会导致渲染混乱。 解决这个问题的关键在于ItemRenderer的初始化和数据...
Flex图片滚动技术是一种基于Adobe Flex框架实现的动态图像展示解决方案。Flex是一款强大的开发工具,用于构建富互联网应用程序(RIA),它使用ActionScript编程语言和MXML标记语言,为Web提供丰富的交互体验。在这个...
9. **样式和皮肤**:Flex支持样式和皮肤,开发者可以通过定义CSS样式来改变组件的外观,使应用符合特定的设计风格。 10. **响应式设计**:考虑到跨设备兼容性,开发者可能使用Flex的弹性布局(Flexbox)或响应式...
flex tree 自动显示横向滚动条 自定义重写