الأدوات الأيونية تبديل المكون المنزلق بالكلمات

مقدمة

نظرًا لأن مكون التبديل المنزلق بالكلمات مطلوب في المشروع ، فإن Ionic يوفر هذا:

ما تحتاجه في المشروع الفعلي:

بحثت عن تطبيقات أخرى عبر الإنترنت ، لكنني شعرت أنه لا يوجد شيء مشابه ، ولم أجد أي شيء مناسب ، لذلك حاولت تحديد واحد واستخدامه قدر الإمكان. أولا ، الاداءات

هناك حواف خشنة غير واضحة عند النظر إلى العروض ، والتي قد تكون بسبب تأثير البكسل ، وتؤدي بسلاسة على هواتف Android و iOS.

تنفيذ الكود

في الواقع ، من السهل جدًا التنفيذ. يحسب بشكل أساسي موضع التمرير. يستخدم الانزلاق تحويل CSS.

الفصول التي تستخدمها CSS هي كما يلي:

 .switch_search {الموضع: النسبية ؛ العرض: Flex ؛ العرض: 120px ؛ الارتفاع: 28px ؛ Margin-Top: 8px ؛ الحدود: الصلبة 1px #fff ؛ الحدود-radius: 16px ؛}. switch_search_tab {flex: 1 ؛ الارتفاع: 28px ؛ العرض: 60px ؛ خط الخط: 28px ؛ اللون:#203c4b ؛ z-index: 12 ؛}. white_search_tab {color: #fff ؛}. switch_bg {background: #fff ؛ border-radius: 16px ؛ الموضع: Absolute ؛ أعلى: -1px ؛ اليسار: -1px ؛ الارتفاع: 28px ؛ العرض: 60px ؛}. search_right {transition: -webkit-transform ، تحويل 0.6s سهولة ؛ -webkit-transform: Translate3D (60px ، 0 ، 0) ؛ -moz-transform: Translate3D (60px ، 0 ، 0) ؛ تحويل: Translate3D (60px ، 0 ، 0) ؛}. Search_Left {Transition: -webkit -transform ، تحويل 0.6s سهولة ؛ -webkit-transform: Translate3D (0px ، 0 ، 0) ؛ -moz-transform: translate3d (60px ، 0 ، 0) ؛}. search_left {transition: -webkit-transform ، تحويل 0.6s سهولة ؛ -webkit-transform: Translate3D (0px ، 0 ، 0) ؛ -moz-transform: Translate3D (0px ، 0 ، 0) ؛ -moz-transform: Translate3D (0px ، 0 ، 0) ؛ Translate3D (0px ، 0 ، 0) ؛ تحويل: Translate3D (0px ، 0 ، 0) ؛}

رمز HTML على الصفحة:

 <viv> <div on-right-right = "ActivesLidesearch (1)" ng-click = "activeslidesearch (0)" ng-class = "(slideIndexSearch == 0 || slideExSearch ==-1)؟ '': 'white_search_tab'" ng-click = "activeslidesearch (1)" ng-class = "(slideIndExSearch == 1)؟

رمز وحدة التحكم JS المقابلة على النحو التالي:

 $ scope.slideIndexSearch = -1 ؛ $ scope.activeslidesearch = function (index) {$ scope.slideIndExSearch = index ؛} ؛

وبهذه الطريقة ، يمكن تنفيذ مكون التبديل المنزلق البسيط بالكلمات.

ما سبق هو كل محتوى هذه المقالة. آمل أن يكون ذلك مفيدًا لتعلم الجميع وآمل أن يدعم الجميع wulin.com أكثر.