|
本站除标注[FW]和资讯文章外都为原创文章，转载请注:
转载来源: Coming X
原文链接: Flex4 List 平滑滚动
——————————————–
Flex4 list组件内置了滚动条，但是有时候UI设计的需要，我们期望隐藏滚动条，通过上下翻页按钮来实现滚动，但是Flex滚动的效果是很突然的，不平滑，给人顿挫感强烈，因此本文利用Flex Tween辅助List实现平滑滚动。右击Flex项目查看源代码。
关键代码：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
| private var tween:Tween;
protected function previousClickHandler(event:MouseEvent):void
{
var from:Number = frameList.scroller.horizontalScrollBar.viewport.horizontalScrollPosition;
var end:Number = frameList.scroller.horizontalScrollBar.viewport.horizontalScrollPosition - frameList.scroller.horizontalScrollBar.viewport.width;
if(tween != null)
{
tween.endTween();
}
tween = new Tween(this,from,end,500,10,tweenUpdateHandler,tweenEndHandler);
tween.easingFunction = Linear.easeInOut;
}
protected function nextClickHandler(event:MouseEvent):void
{
var from:Number = frameList.scroller.horizontalScrollBar.viewport.horizontalScrollPosition;
var end:Number = frameList.scroller.horizontalScrollBar.viewport.horizontalScrollPosition + frameList.scroller.horizontalScrollBar.viewport.width;
if(tween != null)
{
tween.endTween();
}
tween = new Tween(this,from,end,500,10,tweenUpdateHandler,tweenEndHandler);
tween.easingFunction = Linear.easeInOut;
}
private function tweenUpdateHandler(value:String):void
{
frameList.scroller.horizontalScrollBar.viewport.horizontalScrollPosition = Math.round(Number(value) * 100) / 100;
}
private function tweenEndHandler(value:String):void
{
} |
<s:List id="frameList" minWidth="0" minHeight="0" width="100%" borderVisible="false" verticalCenter="0"
skinClass="comingx.jingle.skins.FrameListSkin"
dataProvider="{dataProvider}"
itemRenderer="comingx.jingle.renderers.FrameListItemRenderer"
>
<s:layout>
<s:HorizontalLayout gap="5" id="frameListLayout" />
</s:layout>
</s:List> |
