Flex中不用ScrollBar实现滚动效果

最新推荐文章于 2022-10-18 10:43:51 发布

lonelysailer

最新推荐文章于 2022-10-18 10:43:51 发布

阅读量195

点赞数

分类专栏： Flex 文章标签： Flex XML

Flex 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一个使用Flex构建的应用程序实例，该程序通过水平滚动功能实现内容展示，并且能够动态添加和移除数据项。文章详细展示了如何利用Flex框架进行自定义组件的设计，包括按钮的点击事件、数据绑定及滚动条的自适应调整等。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" viewSourceURL="srcview/index.html">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            [Embed(source=&apos;Assets.swf&apos;, symbol=&apos;fwdMonthDown&apos;)]
            [Bindable] private var rightArrow:Class;

            [Embed(source=&apos;Assets.swf&apos;, symbol=&apos;backMonthUp&apos;)]
            [Bindable] private var leftArrow:Class;

            [Bindable] private var dp:ArrayCollection = new ArrayCollection([
            {label:"11111111111"},
            {label:"22222222222"},
            {label:"33333333333"}
            ]);

            private function adjustSize():void {
                if(container.maxHorizontalScrollPosition > 0){
                    if(container.horizontalScrollPosition > container.maxHorizontalScrollPosition)
                        container.horizontalScrollPosition = container.maxHorizontalScrollPosition;
                    scrollLeftBtn.visible = true;
                    scrollRightBtn.visible = true;
                }else{
                    container.horizontalScrollPosition = 0;
                    scrollLeftBtn.visible = false;
                    scrollRightBtn.visible = false;
                }
            }

            private function scrollLeft(delta:int = 10):void {
                if(container.horizontalScrollPosition > 0)
                    container.horizontalScrollPosition -= delta;
            }

            private function scrollRight(delta:int = 10):void {
                if(container.horizontalScrollPosition < container.maxHorizontalScrollPosition)
                    container.horizontalScrollPosition += delta;
            }

            private function onMouseWheel(event:MouseEvent):void {
                if(event.delta > 0)
                    scrollLeft(20);
                else if(event.delta < 0)
                    scrollRight(20);
            }

            private function onAddItem():void {
                var i:int = dp.length+1;
                var o:Object = {label: String(i * 11111111111)};
                dp.addItem(o);
            }

            private function onRemoveItem():void {
                if(dp.length > 0)
                    dp.removeItemAt(dp.length-1);
            }

        ]]>
    </mx:Script>


    <mx:Box width="60%" id="parentContainer" backgroundColor="#ffcc00">

        <mx:HBox width="100%" horizontalGap="0" mouseWheel="onMouseWheel(event)" resize="adjustSize()"
            horizontalScrollPolicy="off">
            <mx:Button buttonDown="scrollLeft()" autoRepeat="true" id="scrollLeftBtn"
                includeInLayout="{scrollLeftBtn.visible}" visible="false"
                cornerRadius="0" icon="{leftArrow}" width="20" />
            <mx:HBox maxWidth="{parentContainer.width-scrollRightBtn.width-scrollLeftBtn.width}"
                horizontalScrollPolicy="off" id="container"
                horizontalGap="0">
                <mx:LinkBar dataProvider="{dp}" labelField="label" updateComplete="adjustSize()" />
            </mx:HBox>
            <mx:Button buttonDown="scrollRight()" autoRepeat="true" id="scrollRightBtn"
                includeInLayout="{scrollRightBtn.visible}" visible="false"
                cornerRadius="0" icon="{rightArrow}" width="20" />
        </mx:HBox>

    </mx:Box>
    <mx:Button label="add item" click="onAddItem()" />
    <mx:Button label="remove item" click="onRemoveItem()" />

</mx:Application>