ionic實(shí)現(xiàn)可滑動(dòng)的tab選項(xiàng)卡切換效果
利用ionic的slide-box組件實(shí)現(xiàn)可滑動(dòng)的tab,主要是監(jiān)聽(tīng)tab點(diǎn)擊以及slide頁(yè)面滑動(dòng)的事件,做相應(yīng)的處理,用ng-repeat循環(huán),優(yōu)化、簡(jiǎn)略了代碼,有需要的同學(xué)可以看看。
先來(lái)張效果圖:
用到的css代碼:
.tab_default{ border-bottom:solid 1px #F2F2F2; padding:6px 0; } .tab_select{ border-bottom:solid 1px #3E89F5; box-shadow:0 -3px 8px #C1D3F0 inset; } .arrow-top { position: absolute; width: 0; height: 0; top:20px; border: 6px solid #3E89F5; border-right-color:transparent; border-left-color: transparent; border-top-color: transparent; } .arrow-top:after { content:''; position:absolute; width: 0; height: 0; border: 12px solid #fff; right: -12px; bottom: -13px; border-right-color:transparent; border-left-color: transparent; border-top-color: transparent; }
頁(yè)面上html代碼:
<ion-view view-title="滑動(dòng)tab"> <ion-content has-bouncing="false"> <div style="display:flex;width:100%;"> <div style="flex:1;text-align: center;" class="tab_default" ng-repeat="d in tabNames" ng-click="activeSlide($index)" ng-class="slectIndex==$index ? 'tab_select' : '' "> {vvxyksv9kd} <div class="arrow-top" style="left:{{15+$index*33}}%" ng-show="slectIndex==$index"></div> </div> </div> <ion-slide-box on-slide-changed="slideChanged(index)" active-slide="slideIndex" does-continue="false" show-pager="false"> <ion-slide ng-repeat="p in pages"> <div ng-include="p"></div> </ion-slide> </ion-slide-box> </ion-content> </ion-view>
對(duì)應(yīng)的controller.js代碼:
$scope.tabNames=['java','html5','android']; $scope.slectIndex=0; $scope.activeSlide=function(index){//點(diǎn)擊時(shí)候觸發(fā) $scope.slectIndex=index; $ionicSlideBoxDelegate.slide(index); }; $scope.slideChanged=function(index){//滑動(dòng)時(shí)候觸發(fā) $scope.slectIndex=index; }; $scope.pages=["templates/tab01.html","templates/tab02.html","templates/tab03.html"];
tab01.html、tab02.html、tab03.html這幾個(gè)都是差不多的,貼一個(gè)tab01的:
<div style="width:100%;text-align: center;padding-top:30px;"> page 01 <p style="margin-top:30px;"> <img src="img/tab01.jpg" style="width:100%;"/> </p> </div>
注意點(diǎn):
•點(diǎn)擊時(shí)候?qū)?dāng)前循環(huán)的索引$index賦值給變量slideIndex,在tab中使用ng-class判斷點(diǎn)擊時(shí)候的索引和slideIndex是否一樣,一樣則改變相應(yīng)的tab的樣式;
•滑動(dòng)的時(shí)候是用的slide-box的一個(gè)函數(shù),on-slide-changed,當(dāng)slide頁(yè)面發(fā)發(fā)生變化的時(shí)候,會(huì)向改函數(shù)傳遞一個(gè)變量index標(biāo)識(shí)當(dāng)前slide的索引;
•如果不想滾動(dòng)只點(diǎn)擊,可以去掉on-slide-changed的監(jiān)聽(tīng),也可以增加一個(gè)屬性,disable-scroll="true",禁止slide page滾動(dòng);
如果大家還想深入學(xué)習(xí),可以點(diǎn)擊兩個(gè)精彩的專題:javascript選項(xiàng)卡操作方法匯總 jquery選項(xiàng)卡操作方法匯總
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
bootstrap treeview 擴(kuò)展addNode方法動(dòng)態(tài)添加子節(jié)點(diǎn)的方法
bootstrap-treeview 是一款基于Jquery+bootstrap的樹(shù)控件,這篇文章主要介紹了bootstrap treeview 擴(kuò)展addNode方法動(dòng)態(tài)添加子節(jié)點(diǎn)的方法,需要的朋友可以參考下2017-11-11javascript頁(yè)面加載完執(zhí)行事件代碼
本篇文章主要是對(duì)javascript頁(yè)面加載完執(zhí)行事件的代碼進(jìn)行了介紹,需要的朋友可以過(guò)來(lái)參考下,希望對(duì)大家有所幫助2014-02-02在?localStorage?中上傳和檢索存儲(chǔ)圖像的示例詳解
這篇文章主要介紹了在?localStorage?中上傳和檢索存儲(chǔ)圖像,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-06-06javascript一個(gè)無(wú)懈可擊的實(shí)例化XMLHttpRequest的方法
由于IE新舊版本以及與其他瀏覽器在ajax技術(shù)上的不同,往往需要對(duì)不同的瀏覽器做不同的處理,除了笨拙的瀏覽器嗅探技術(shù),大約也就是對(duì)象檢測(cè)技術(shù)可用了。2010-10-10JS按位非(~)運(yùn)算符與~~運(yùn)算符的理解分析
按位非運(yùn)算符,簡(jiǎn)單的理解就是改變運(yùn)算數(shù)的符號(hào)并減去1,當(dāng)然,這是只是簡(jiǎn)單的理解能轉(zhuǎn)換成number類型的數(shù)據(jù)2011-07-07談?wù)凧avaScript中super(props)的重要性
今天小編就為大家分享一篇關(guān)于談?wù)凧avaScript中super(props)的重要性,小編覺(jué)得內(nèi)容挺不錯(cuò)的,現(xiàn)在分享給大家,具有很好的參考價(jià)值,需要的朋友一起跟隨小編來(lái)看看吧2019-02-02JS實(shí)現(xiàn)自定義狀態(tài)欄動(dòng)畫(huà)文字效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)自定義狀態(tài)欄動(dòng)畫(huà)文字效果,涉及javascript結(jié)合時(shí)間函數(shù)動(dòng)態(tài)設(shè)置IE狀態(tài)欄文字顯示效果相關(guān)操作技巧,需要的朋友可以參考下2017-10-10iframe的onload在Chrome/Opera中執(zhí)行兩次Bug的解決方法
創(chuàng)建iframe對(duì)象,添加load事件, 再將iframe添加到body中。Chrome/Opera中會(huì)造成load事件的handler執(zhí)行兩次。2011-03-03JavaScript中7種位運(yùn)算符在實(shí)戰(zhàn)的妙用
位運(yùn)算是在數(shù)字底層(即表示數(shù)字的 32 個(gè)數(shù)位)進(jìn)行運(yùn)算的,下面這篇文章主要給大家介紹了關(guān)于JavaScript中7種位運(yùn)算符在實(shí)戰(zhàn)的妙用,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06