Kata pengantar
Karena komponen geser sakelar dengan kata -kata diperlukan dalam proyek, Ionic menyediakan ini:
Apa yang Anda butuhkan dalam proyek yang sebenarnya:
Saya mencari implementasi lain secara online, tetapi saya merasa tidak ada yang serupa, dan saya tidak menemukan sesuatu yang cocok, jadi saya mencoba mendefinisikan satu dan menggunakannya semampu saya. Pertama, rendering
Ada tepi bergerigi yang kabur saat melihat rendering, yang mungkin disebabkan oleh pengaruh piksel, dan berkinerja sangat lancar pada ponsel Android dan iOS.
Mengimplementasikan kode
Bahkan, sangat mudah untuk diimplementasikan. Ini terutama menghitung posisi slider. Sliding menggunakan transformasi CSS.
Kelas yang digunakan oleh CSS adalah sebagai berikut:
.switch_search {position: relatif; display: flex; lebar: 120px; tinggi: 28px; margin-top: 8px; border: solid 1px #fff; border-radius: 16px;}. switch_search_tab {flex: 1; tinggi: 28px; lebar: 60px; Line-height: 28px; warna:#203c4b; z-index: 12;}. White_search_tab {color: #fff;}. Switch_bg {latar belakang: #fff; border-radius: 16px; posisi: absolute; Atas: -1px; kiri: -1px; tinggi: 28px; Lebar: 60px;}. Search_right {transisi: -webkit-transform, mengubah kemudahan 0,6s; -webkit-transform: translate3d (60px, 0, 0); -Moz-transform: translate3d (60px, 0, 0); Transform: translate3d (60px, 0, 0);}. Search_Left {transisi: -webkit -transform, mengubah kemudahan 0,6S; -webkit-transform: translate3d (0px, 0, 0); -Moz-Transform: translate3d (60px, 0, 0);}. Search_Left {transisi: -webkit-transform, mengubah kemudahan 0,6S; -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);}Kode HTML di halaman:
<VET> <DIV On-SWIPE-RIGHT = "ActiveSlidesearch (1)" ng-click = "ActiveSlidesearch (0)" ng-class = "(slideIndexSearch == 0 || slideIndexSearch ==-1)? '': 'white_search_tab'" Bulan </div> <div on-swipe-left = "white_search_tab '"> Bulan </div> <div on-swipe = leefor = "Actearch_tab'"> Bulan </Div> <div on-swipe = lefle = "Actearch_tab '"> Bulan </Div> <div on-swipe = lefle = "Actearch_tab'"> Bulan </div <div on-swipe = lefle = "Actearch_tab '"> ng-klik = "ActiveSlidesearch (1)" ng-class = "(slideIndexSearch == 1)? '': 'white_search_tab'"> hari </div> <div ng-class = "(slideIndexSearch == 0 || slideIndexsearch ==-1)? 'Search_left': 'Search_Right'>
Kode JS pengontrol yang sesuai adalah sebagai berikut:
$ scope.slideIndexSearch = -1; $ scope.activeslidesearch = function (index) {$ scope.slideIndexSearch = index;};Dengan cara ini, komponen sakelar geser sederhana dengan kata -kata dapat diimplementasikan.
Di atas adalah semua konten artikel ini. Saya berharap ini akan membantu untuk pembelajaran semua orang dan saya harap semua orang akan lebih mendukung wulin.com.