1、上面的标题过多,我们选择的方法是让TabBar显示有限的标题
2、TabBar的每一项的宽度(Button的宽度)都是根据标题的长度来设置的,超出的部分不现实
<s:Group id="myContainer" height="100%" clipAndEnableScrolling="true" width="{this.width-50}">
<s:TabBar id="menuBar" dataProvider="{source}" alpha="1" skinClass="components.tabbar.TabBarSkin_Scroll" click="menuBar_clickHandler(event)"/>
</s:Group>
3、四个移动思想的代码
/* 往右移动 坐标(负的)+当前总长度>窗口 原来坐标+视口-(坐标(负的)+当前总长度) */ private function checkRight():void{ var index:int=menuBar.selectedIndex; var maxIndex:int=this.source.length-1; if(index==maxIndex){ return; } index++; menuBar.selectedIndex=index; var sum:Number=0;//长度 for(var i:int=0;i<=index;i++){ sum+=FlexGlobals.topLevelApplication.itemWidthArr[i]; } if((sum+menuBar.x)>myContainer.width){ menuBar.move(menuBar.x+myContainer.width-(sum+menuBar.x),menuBar.y); } } private function checkLeft():void{ /* 往左移动 坐标(负的)+当前总长度<当前选择的索引长度 原来坐标+当前选择的索引长度-(坐标(负的)+当前总长度) */ var index:int=menuBar.selectedIndex; if(index<1){ return; } var maxIndex:int=this.source.length-1; index--; menuBar.selectedIndex=index; var sum:Number=0;//长度 for(var i:int=0;i<=index;i++){ sum+=FlexGlobals.topLevelApplication.itemWidthArr[i]; } if((sum+menuBar.x)<FlexGlobals.topLevelApplication.itemWidthArr[i]){ menuBar.move(menuBar.x+FlexGlobals.topLevelApplication.itemWidthArr[i]-(sum+menuBar.x),menuBar.y); } } private function checkFirst():void{ /* 选择第一个 */ if(menuBar.selectedIndex==0){ if(menuBar.x!=0){ menuBar.move(0,menuBar.y); } } } private function checkLast():void{ /* 选择第一个 */ if(menuBar.selectedIndex==source.length){ if(menuBar.x!=(myContainer.width-menuBar.width)){ menuBar.move(0,myContainer.width-menuBar.width); } } }
4、时间有限,有问题留言哈,详细代码附件 。
5、如果您有更好的解决方案或代码有缺陷的地方,望告之,一定虚心接受,谢谢。