Flex组件自定义滚动条的兑现（真）

Flex组件自定义滚动条的实现（真）

最近项目中要求滚动条加上自己的样式，于是Google找答案。

结果找到一群类似的是说，滚动条中间的小图标会拉伸。无语... ...

?

实际上只是那些人不懂而已。Flex这么强大，怎么可能有这种问题。

?

（下面这段代码是网上的代码，使用后是没有小图标的，或者有的网站说使用九宫截图的方式加上下图标）

?

.scrollBar{
?downArrowUpSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png");
?downArrowOverSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png");
?downArrowDownSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png");
?downArrowDisabledSkin:Embed(source="img/mainLeftScrollBar/bar_bottom.png");
?
?upArrowUpSkin:Embed(source="img/mainLeftScrollBar/bar_top.png");
?upArrowOverSkin:Embed(source="img/mainLeftScrollBar/bar_top.png");
?upArrowDownSkin:Embed(source="img/mainLeftScrollBar/bar_top.png");
?upArrowDisabledSkin:Embed(source="img/mainLeftScrollBar/bar_top.png");
?
?thumbDownSkin:Embed(source="img/mainLeftScrollBar/bar_middle_down.png",scaleGridLeft="2",scaleGridTop="2",scaleGridRight="12",scaleGridBottom="26");
?thumbUpSkin:Embed(source="img/mainLeftScrollBar/bar_middle.png",scaleGridLeft="2",scaleGridTop="2",scaleGridRight="12",scaleGridBottom="26");
?thumbOverSkin:Embed(source="img/mainLeftScrollBar/bar_middle_over.png",scaleGridLeft="2",scaleGridTop="2",scaleGridRight="12",scaleGridBottom="26");
??
??? trackSkin:Embed(source="img/mainLeftScrollBar/bar_bg.png",scaleGridLeft="2",scaleGridTop="2",scaleGridRight="12",scaleGridBottom="26");
}

?

?

于是看API文档ScrollBar这个类中明确指明了很多属性。

其中有一条就是

thumbIcon-----该类用作滚动条的缩略图的图标。 默认值为 "undefined".

所以，

在上面的代码基础上加上

thumbIcon:Embed(source="img/mainLeftScrollBar/thumb.png");

这句，滚动条中间的那个小图标就出来了。

---------------------------

PS：那些错误的文章就不要转发N次了，误导人，看那东西还不如自己看API来得快

?

?