Предисловие
Поскольку в проекте требуется скользящий компонент переключения со словами, Ionic обеспечивает это:
Что вам нужно в реальном проекте:
Я искал другие реализации в Интернете, но я чувствовал, что нет ничего подобного, и я не нашел ничего подходящего, поэтому я попытался определить его и использовать его как мог. Во -первых, визуализации
При просмотре рендерингов есть размытые зазубренные края, которые могут быть связаны с влиянием пикселей, и очень плавно выполняют телефоны Android и iOS.
Реализовать код
На самом деле, это очень просто в реализации. В основном он рассчитывает положение слайдера. В скольжении используется преобразование CSS.
Классы, используемые CSS, следующие:
.switch_search {положение: относительное; отображение: гибкость; ширина: 120px; высота: 28px; Margin-Top: 8px; граница: твердый 1px #fff; граница-радий: 16px;}. Switch_search_tab {flex: 1; высота: 28px; ширина: 60px; Line-Height: 28px; Color:#203c4b; z-index: 12;}. White_search_tab {color: #fff;}. Switch_bg {founale: #fff; Border-radius: 16px; позиция: Absolute; Верх: -1px; слева: -1px; высота: 28px; ширина: 60px;}. search_right {переход: -webkit-transform, преобразование 0,6 с легкостью; -Webkit-transform: translate3d (60px, 0, 0); -moz-transform: translate3d (60px, 0, 0); Transform: translate3d (60px, 0, 0);}. search_left {переход: -webkit -transform, преобразование 0,6s легко; -Webkit-transform: translate3d (0px, 0, 0); -moz-transform: translate3d (60px, 0, 0);}. search_left {переход: -webkit-transform, преобразование 0,6s ext; -Webkit-transform: translate3d (0px, 0, 0); -moz-transform: translate3d (0px, 0, 0); -moz-transform: translate3d (0px, 0, 0); translate3d (0px, 0, 0); Transform: translate3d (0px, 0, 0);}HTML -код на странице:
<div> <div on-swipe-right = "activeslidesearch (1)" ng-click = "ActiveSlidesearch (0)" ng-class = "(slideIndexsearch == 0 || slideIndexSearch ==-1)? ng-click = "ActiveSlideSearch (1)" ng-class = "(slideIndexsearch == 1)? '': 'white_search_tab'"> day </div> <div ng-class = "(slideindexsearch == 0 || slideindexsearch ==-1)?
Соответствующий код JS -контроллера следующим образом:
$ scope.slideidexsearch = -1; $ scope.activeslidesearch = function (index) {$ scope.slideidexsearch = index;};Таким образом, может быть реализован простой компонент скольжения со словами.
Выше всего содержание этой статьи. Я надеюсь, что это будет полезно для каждого обучения, и я надеюсь, что все будут поддерживать Wulin.com больше.