Компонент слайд-коробса ионного использования используется для реализации скользящей вкладки. В основном это отслеживает вкладку щелчки и скользящие события скольжения и обрабатывает их соответственно. Используйте петли NG-Repeat, чтобы оптимизировать и упростить код. Нуждающиеся студенты могут взглянуть.
Давайте сначала возьмем рендеринг:
Используемый код CSS:
.tab_default {Border-Bottom: Solid 1px #f2f2f2; Надо: 6px 0;}. Tab_select {Border-Bottom: Solid 1px #3e89f5; Box-Shadow: 0 -3px 8px #c1d3f0 inset;}. Arrow-top {position: Absolute; Ширина: 0; высота: 0; Верх: 20px; Граница: 6px Solid #3E89F5; граница правый цвет: прозрачный; Пограничный левый цвет: прозрачный; пограничный цвет: прозрачный;}. Стрелка-топ: после {content: ''; позиция: абсолютно; Ширина: 0; высота: 0; Граница: 12px solid #fff; Справа: -12px; Внизу: -13px; граница правый цвет: прозрачный; Пограничный левый цвет: прозрачный; пограничный цвет: прозрачный;}HTML -код на странице:
<Ion-view View-title = "Slinding Tab"> <Ion-Content has-buncing = "false"> <div style = "Display: Flex; ширина: 100%;"> <div style = "flex: 1; text-align: center;" ng-repeat = "d in tabnames" ng-click = "activeslide ($ index)" ng-class = "slectindex == $ index? </div> <Ионо-слидный ящик On-Slide-изменянный = "Slidechanged (index)" Active-Slide = "SlideIndex" do-continue = "false" show-pager = "false"> <Ion-slide ng-repeat = "p на страницах"> <div ng-include = "> </div> </yon-slide-slide-slide-slide-slide-slide-slide-b </ионо-контент> </ion-view>
Соответствующий Controller.js код:
$ scope.tabnames = ['java', 'html5', 'android']; $ scope.slectindex = 0; $ scope.activeslide = function (index) {// триггер при нажатии $ scope.slectindex = index; $ ionicslideboxDelegate.slide (index);}; $ scope.slidechanged = function (index) {// триггер при скольжении $ scope.slectindex = index;}; $ scope.pages = [«Шаблоны/tab01.html», «Templates/tab02.html», «Templates/tab.html»;Tab01.html, tab02.html, tab03.html все похожи. Разместите TAB01:
<div> Страница 01 <p style = "margin-top: 30px;"> <img src = "img/tab01.jpg"/> </p> </div>
Примечание:
• При нажатии назначьте индекс $ индекса текущего цикла с переменной SlideIndex. Используйте NG-класс на вкладке, чтобы определить, являются ли индекс и SlideIndex одинаковыми при нажатии. Если то же самое верно, измените стиль соответствующей вкладки;
• При скольжении используется функция слайд-бокса, изменяется в сестре. При изменении страницы слайдов, индекс переменной будет передана функции изменения, чтобы идентифицировать индекс текущего слайда;
• Если вы не хотите прокручивать и просто щелкнуть, вы можете удалить прослушивание, изменяемое на листе, или добавить свойство, отключить-scroll = "true" и запретить прокрутку страницы слайда;
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.