ไอออนิกใช้ส่วนประกอบการเลื่อนด้วยคำ

คำนำ

เนื่องจากจำเป็นต้องใช้องค์ประกอบการเลื่อนสลับด้วยคำศัพท์ในโครงการ Ionic จึงให้สิ่งนี้:

สิ่งที่คุณต้องการในโครงการจริง:

ฉันมองหาการใช้งานอื่น ๆ ทางออนไลน์ แต่ฉันรู้สึกว่าไม่มีอะไรคล้ายกันและฉันไม่พบสิ่งใดที่เหมาะสมดังนั้นฉันจึงพยายามกำหนดและใช้มันเท่าที่จะทำได้ อันดับแรกการเรนเดอร์

มีขอบขรุขระเบลอเมื่อดูการเรนเดอร์ซึ่งอาจเกิดจากอิทธิพลของพิกเซลและทำงานได้อย่างราบรื่นบนโทรศัพท์ Android และ iOS

ใช้รหัส

ในความเป็นจริงมันง่ายมากที่จะนำไปใช้ ส่วนใหญ่จะคำนวณตำแหน่งของตัวเลื่อน การเลื่อนใช้การแปลง CSS

คลาสที่ใช้โดย CSS มีดังนี้:

 .switch_search {ตำแหน่ง: สัมพัทธ์; แสดง: Flex; Width: 120px; ความสูง: 28px; ระยะขอบด้านบน: 8px; ชายแดน: Solid 1px #FFF; Border-Radius: 16px;}. Switch_search_tab {Flex: 1; ความสูง: 28px; ความกว้าง: 60px; จุดสูง: 28px; สี:#203C4B; z-index: 12;}. white_search_tab {color: #fff;}. switch_bg {พื้นหลัง: #FFF; Border-Radius: 16px; ตำแหน่ง: Absolute; ด้านบน: -1px; ซ้าย: -1px; ความสูง: 28px; ความกว้าง: 60px;}. search_right {การเปลี่ยนแปลง: -webkit-transform, แปลง 0.6S ง่ายดาย; -webkit-transform: translate3d (60px, 0, 0); -moz-transform: Translate3d (60px, 0, 0); แปลง: translate3d (60px, 0, 0);}. search_left {การเปลี่ยนแปลง: -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 ในหน้า:

 <div> <div on-swipe-right = "ActiveSlidesearch (1)" ng-click = "ActiveSlidesearch (0)" ng-class = "(slideIndexSearch == 0 || slideIndexSearch ==-1)? '': 'white_search_tab' ng-click = "ActiveSlidesearch (1)" ng-class = "(slideIndexSearch == 1)? '': 'white_search_tab'"> วัน </div> <div ng-class = "

รหัสคอนโทรลเลอร์ที่เกี่ยวข้องมีดังนี้:

 $ scope.slideIndexSearch = -1; $ scope.activeSlidesearch = ฟังก์ชั่น (ดัชนี) {$ scope.slideIndexSearch = index;};

ด้วยวิธีนี้สามารถนำส่วนประกอบสลับแบบเลื่อนได้อย่างง่ายด้วยคำพูด

ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น