คำนำ
เนื่องจากจำเป็นต้องใช้องค์ประกอบการเลื่อนสลับด้วยคำศัพท์ในโครงการ 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 มากขึ้น