`
yexin218
  • 浏览: 973092 次
  • 性别: Icon_minigender_1
  • 来自: 珠海
社区版块
存档分类
最新评论

Flex支持滑轮滚动

    博客分类:
  • Flex
阅读更多

有些时候需要在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>
 Demo演示:【或者点击链接测试:http://www.myflex.org/codesamples/mousewheel/MouseWheel.html

例子中我们是检查了被focus的组件是否是TextInput,如果是执行递增或者递减的功能。如果不是比如TextArea类型的,就不具有这 个效果了。需要注意的,如果你的系统不支持滑轮滚动可能跟驱动有关,不是Flex的问题。如果你不喜欢例子中的增长或者递减数值,你可以替换掉delta 这个属性。

原创作者:Yakov Fain 。翻译整理:一路风尘
分享到:
评论

相关推荐

    flex滚动条三种实现方式

    在Flex布局中,我们可以有几种不同的方法来实现滚动条,尽管它们在技术上可能被视为一种实现,但可以以不同的样式呈现。下面我们将详细探讨这些方法。 1. **默认滚动条**: 在不进行任何自定义的情况下,浏览器会...

    flex textlayout 滚动条

    1. **TextLayout框架**:TextLayout是Flex 4引入的一个高级文本渲染库,支持复杂的文本格式化,如多语言、排版、字体嵌入等。它基于Apache Flex SDK,提供了更高效的文本处理能力,特别是在处理大量文本或复杂格式时...

    经过修改皮肤的flex4滚动条。

    本主题将深入探讨如何修改Flex4滚动条的皮肤,以改变Scroller组件的外观。 滚动条在用户界面中起着至关重要的作用,它允许用户浏览超出视口的内容。在Flex4中,Scroller组件是一个容器,它可以包含其他组件,并提供...

    flexwheel flex实现的图片滚动效果

    在"flexwheel flex实现的图片滚动效果"中,"flexwheel"组件利用了Flex布局的特性,如`display: flex`、`flex-direction`、`justify-content`和`align-items`等属性,来创建一个可滚动的图片轮播。这种轮播通常具有...

    FLEX 连续向左滚动字幕

    FLEX连续向左滚动字幕,可用于作公告栏展示。

    Flex 拖动,滚动曲线图

    在本例中,我们关注的是“Flex 拖动,滚动曲线图”,这涉及到Flex中的图表组件和用户交互功能。 首先,Flex中的曲线图,通常称为LineChart,是用于展示数据趋势的可视化工具。LineChart组件允许开发者将一系列数据...

    Flex 按钮代替滚动条

    Flex 按钮代替滚动条,看了就知道了。。

    flex横向条形图增加滚动条分页显示数据

    针对“flex横向条形图增加滚动条”的需求,我们需要创建一个包含条形图的Flex容器,并为其添加滚动条组件。在Flex中,我们可以使用`HScroller`组件来实现水平滚动条。这个组件会自动根据容器内容的宽度来调整其滚动...

    flex 图片浏览,flex图片滚动效果

    2. **数据绑定**:Flex支持数据绑定,这意味着可以将图片URL与`Image`组件的`source`属性关联,从而动态改变显示的图片。这在处理多张图片时非常有用。 3. **ArrayCollection**:为了存储和管理多张图片的数据,...

    Flex中不用ScrollBar实现滚动效果

    Flex中不用ScrollBar实现滚动效果

    自定义滚动条flex

    自定义滚动条.用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 iframe 支持在flash中嵌套入html jsp asp php等flex...

    FLex 左右滑动图片墙

    在本文中,我们将深入探讨如何使用Adobe Flex技术创建一个具有左右滑动功能的图片墙。Flex是一种基于ActionScript 3(AS3)的开源框架,主要用于构建富互联网应用程序(RIA)。通过利用Flex,开发者可以轻松地创建...

    flex 图片滚动

    【Flex 图片滚动】是一种在Web开发中使用Adobe Flex框架实现的动态图片展示技术,它允许用户以轮播或滑动的方式浏览多张图片。在本文中,我们将深入探讨基于Flex的图片轮换机制,以及如何通过源码实现这一功能。 一...

    flex实现鼠标滚动放大缩小(以鼠标的位置为中心放大缩小)

    在Flex环境中,我们可以使用AS3(ActionScript 3)来实现这一功能,AS3提供了强大的图形和矩阵运算支持。 为了实现鼠标滚动时的缩放效果,我们需要监听鼠标的`scroll`事件。在Flex应用中,我们可以为舞台或者特定的...

    flex 3D滚动显示图片

    Flex支持EaselJS库,这是一个强大的2D绘图API,虽然EaselJS本身不直接处理3D,但在Flex中可以通过组合多个2D变换模拟3D效果。这些变换包括旋转、缩放和位移,当应用于图片容器时,可以创建出环绕观众旋转的3D视觉...

    解决flex的tilelist中的滚动条下滑,乱渲染问题。

    这是因为Flex的ItemRenderer重用机制,当一个ItemRenderer不再可见(被滚动出视口)时,它会被复用到其他位置,如果没有正确处理选中状态,就会导致渲染混乱。 解决这个问题的关键在于ItemRenderer的初始化和数据...

    flex图片滚动

    Flex图片滚动技术是一种基于Adobe Flex框架实现的动态图像展示解决方案。Flex是一款强大的开发工具,用于构建富互联网应用程序(RIA),它使用ActionScript编程语言和MXML标记语言,为Web提供丰富的交互体验。在这个...

    Flex万年历记事本_flex源码

    9. **样式和皮肤**:Flex支持样式和皮肤,开发者可以通过定义CSS样式来改变组件的外观,使应用符合特定的设计风格。 10. **响应式设计**:考虑到跨设备兼容性,开发者可能使用Flex的弹性布局(Flexbox)或响应式...

    flex tree 自动显示横向滚动条

    flex tree 自动显示横向滚动条 自定义重写

Global site tag (gtag.js) - Google Analytics