Flex中TabBar标题过多的另外实现



 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、如果您有更好的解决方案或代码有缺陷的地方,望告之,一定虚心接受,谢谢。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值