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来得快

 

 

评论

1 楼 yingyima 2011-12-02  

这个... ...那其他拉伸的呢？中间的拉伸有例子讲过... ...