Preface
Since the toggle sliding component with words is required in the project, ionic provides this:
What you need in the actual project:
I looked for other implementations online, but I felt that there was nothing similar, and I didn't find anything suitable, so I tried to define one and use it as I could. First, the renderings
There is blurred jagged edges when looking at the renderings, which may be due to the influence of pixels, and perform very smoothly on Android and iOS phones.
Implement code
In fact, it is very simple to implement. It mainly calculates the position of the slider. The sliding uses css transform.
The classes used by css are as follows:
.switch_search{ position:relative;display:flex;width:120px;height:28px; margin-top:8px;border:solid 1px #fff;border-radius:16px;}.switch_search_tab{ flex:1;height:28px;width:60px; line-height:28px;color:#203C4B;z-index:12;}.white_search_tab{ color:#fff;}.switch_bg{ background:#fff;border-radius:16px;position:absolute; top:-1px;left:-1px;height:28px;width:60px;}.search_right{ transition: -webkit-transform,transform 0.6s ease; -webkit-transform: translate3d(60px, 0, 0); -moz-transform: translate3d(60px, 0, 0); transform:translate3d(60px, 0, 0);}.search_left{ transition: -webkit-transform,transform 0.6s ease; -webkit-transform: translate3d(0px, 0, 0); -moz-transform: translate3d(60px, 0, 0);}.search_left{ transition: -webkit-transform,transform 0.6s ease; -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 code on the page:
<div> <div on-swipe-right="activeSlideSearch(1)" ng-click="activeSlideSearch(0)" ng-class="(slideIndexSearch==0 ||slideIndexSearch==-1) ? '' : 'white_search_tab'"> Month</div> <div on-swipe-left="activeSlideSearch(0)" ng-click="activeSlideSearch(1)" ng-class="(slideIndexSearch==1) ? '' : 'white_search_tab'"> Day</div> <div ng-class="(slideIndexSearch==0 ||slideIndexSearch==-1) ? 'search_left' :'search_right'"></div></div>
The corresponding Controller js code is as follows:
$scope.slideIndexSearch=-1; $scope.activeSlideSearch = function(index) { $scope.slideIndexSearch=index;};In this way, a simple sliding toggle component with words can be implemented.
The above is all the content of this article. I hope it will be helpful to everyone's learning and I hope everyone will support Wulin.com more.