1. 程式人生 > >ionic-基於angularjs實現固定頂部的可迴圈滾動文字的通知banner

ionic-基於angularjs實現固定頂部的可迴圈滾動文字的通知banner

最近一直晚上閒著,就開始想著在banner的小提示的基礎上再封裝一些其他的功能,比如在一些app中的二級導航欄處會出現一些滾動文字的小提示,所以就開始構思如何在ionic的基礎上,利用css3實現這個小元件。

下面是一個demo:


首先的在控制器中依賴$ionicContentBanner     

$ionicContentBanner.showstablebanner({     
       text:'各位旅客您們好,歡迎您們來到廣州!',     
       type:'info',    
});   

可配置值:    
icon: 'ion-close-circled',     //關閉banner的圖示        
text: null,                            //顯示的文字內容,可以包含html         
type: 'info',  //顯示的主題型別,可選'info','warning','error'          
left:200,  //文字距離左邊的距離,預設200px         
height:30,  //banner的高度,預設30px            
delegateHandle:null,        //ion-content的delegate-handle,預設為null,可以設定    

更詳細的用法以及程式碼請訪問https://github.com/bingcool/ionic-banner-tips