PageSlider

PageSlider - ส่วนประกอบหน้าจอเลื่อนบนมือถือ

PageSlider เป็นส่วนประกอบหน้าจอแบบเลื่อนสำหรับเทอร์มินัลมือถือ โดยรองรับการเลื่อนขึ้นและลง เลื่อนไปทางซ้ายและขวา ห้ามเลื่อน และฟังก์ชั่นอื่น ๆ นอกจากนี้ยังรองรับวิธีการโหลดแบบโมดูลาร์ของ AMD

วิธีใช้

HTML:

 < div class =" page-wrap " >
    < div class =" page " >
        < div class =" title " > page one </ div >
        < div class =" subtitle " > page one subtitle </ div >
        < div class =" arrow " > </ div >
    </ div >

    < div class =" page " >
        < div class =" title " > page two </ div >
        < div class =" subtitle " > page two subtitle </ div >
        < div class =" arrow " > </ div >
    </ div >
    < div class =" page " >
        < div class =" title " > page three </ div >
        < div class =" subtitle " > page three subtitle </ div >
        < div class =" arrow " > </ div >
    </ div >
    < div class =" page " >
        < div class =" title " > page four </ div >
        < div class =" subtitle " > page four subtitle </ div >
    </ div >
</ div >

ซีเอสเอส

 html , body , . page-wrap {
    width : 100 % ;
    height : 100 % ;
}

. page {
    width : 100 % ;
    height : 100 % ;
    -webkit-backface-visibility : hidden;
    -webkit-perspective : 1000 ;
}

เนื่องจากหลักการนำไปใช้งาน การตั้งค่าสไตล์ข้างต้นจึงมีความจำเป็น

จาวาสคริปต์

 new PageSlider ( {
    pages : $ ( '.page-wrap .page' )
} ) ; 

พารามิเตอร์

 new PageSlider ( {
    pages : $ ( '.page-wrap .page' ) ,   //必需，需要切换的所有屏
    direction : 'vertical' ,          //可选，vertical 或 v 为上下滑动，horizontal 或 h 为左右滑动，默认为 vertical
    currentClass : 'current' ,        //可选, 当前屏的class (方便实现内容的进场动画)，默认值为 'current'
    gestureFollowing : 'false' ,      //可选，如果为 true，则开启手势跟随模式
    hasDot : 'false' ,                //可选，生成标识点结构，样式自己控制
    preventDefault : true ,           //可选，是否阻止默认行为
    rememberLastVisited : true ,      //可选，记住上一次访问结束后的索引值，可用于实现页面返回后是否回到上次访问的页面
    animationPlayOnce : false ,       //可选，切换页面时，动画只执行一次
    dev : false ,                     //可选，开发模式，传入具体页面索引值
    oninit : function ( ) { } ,         //可选，初始化完成时的回调
    onbeforechange : function ( ) { } , //可选，开始切换前的回调
    onchange : function ( ) { } ,       //可选，每一屏切换完成时的回调
    onSwipeUp : function ( ) { } ,      //可选，swipeUp 回调
    onSwipeDown : function ( ) { } ,    //可选，swipeDown 回调
    onSwipeLeft : function ( ) { } ,    //可选，swipeLeft 回调
    onSwipeRight : function ( ) { }    //可选，swipeRight 回调
} ) ; 

อินเตอร์เฟซ

• prev() หน้าจอก่อนหน้า
• next() หน้าจอถัดไป
• moveTo(n) ข้ามไปยังหน้าจอที่ n พร้อมเอฟเฟกต์การค่อยๆ เปลี่ยน
• moveTo(n, true) ข้ามไปยังหน้าจอที่ n โดยตรงโดยไม่มีการคลายเอฟเฟกต์

จุดฟังก์ชั่น

1. รองรับแอนิเมชั่นการผูก dom

โดยปกติแล้ว ภาพเคลื่อนไหวขององค์ประกอบบนเพจจะถูกควบคุมผ่านสไตล์ ดังต่อไปนี้:

. current . dom {
    -webkit-animation : slideToTop 1 s 0.5 s ease both;
}

PageSlider รองรับการผูกภาพเคลื่อนไหวโดยตรงกับองค์ประกอบ DOM ที่เฉพาะเจาะจงดังต่อไปนี้:

 < div class =" title " data-animation =' {"name": "slideToTop", "duration": 800, "timing-function": "ease", "fill-mode": "both"} ' >
    page two
</ div >
< div class =" subtitle " data-animation =' {"name": "slideToTop", "duration": 800, "delay": 300,  "timing-function": "ease", "fill-mode": "both"} ' >
    page two subtitle
</ div >

2. ท่าทางต่อไปนี้

การเลื่อนเริ่มต้นของ PageSlider นั้นค่อนข้างง่าย โดยจะกำหนดท่าทางในการหมุนหน้าจอโดยตรง อย่างไรก็ตาม เพื่อนของฉันชอบที่จะดึงหน้าและดูหน้าจอถัดไปได้เมื่อสัมผัสหน้าจอ นี่คือ手势跟随ที่เพื่อนของฉันพูด นอกจากนี้ยังเลิกใช้ PageSlider เนื่องจากไม่มีฟังก์ชันนี้ ดังนั้นเวอร์ชันใหม่จึงรองรับ คุณจะต้องตั้งค่าตามที่แสดงทางด้านขวา: gestureFollowing: true

3.ล็อคป้องกันการเลื่อน

ด้วยการพัฒนาของธุรกิจ บางครั้งจำเป็นต้องล็อคหน้าจอปัจจุบันและไม่ตอบสนองต่อเหตุการณ์การเลื่อนของผู้ใช้ จำเป็นต้องคลิกปุ่มหรือดำเนินการบางอย่างให้เสร็จสิ้นก่อนที่จะเลื่อนหน้าจอโดยอัตโนมัติ โปรแกรมปรับปรุงนี้มีวิธีการดังต่อไปนี้สำหรับการล็อค:

 < div class =" page " data-lock-next =" true " data-lock-prev =" true " > </ div >

data-lock-next : ห้ามเลื่อนกลับ data-lock-prev : ห้ามเลื่อนไปข้างหน้า

4. จำดัชนีหน้า

บางครั้ง เมื่อเพจกระโดดกลับ คุณต้องการกลับไปยังเพจที่คุณข้ามไปครั้งล่าสุดโดยตรงโดยไม่ต้องเริ่มต้นใหม่ คุณเพียงแค่ต้องตั้งค่าดังที่แสดงทางด้านขวา: rememberLastVisited: true ซึ่งจะบันทึกดัชนีเพจปัจจุบันไว้ที่ localstorage เมื่อคุณกลับมาก็ใช้งานง่ายดังนี้:

 new PageSlider ( {
    pages : $ ( '.page-wrap .page' ) ,
    rememberLastVisited : true ,
    oninit : function ( ) {
        //返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
        //PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
        if (返回为 true ) {
            this . moveTo ( this . lastVisitedIndex , true ) ;
        }
    }
} ) ;

5. โหมดการพัฒนา

นี่เป็นนิสัยส่วนตัว ตอนที่ฉันพัฒนา ฉันคิดว่าตอนที่เขียนแอนิเมชั่นหน้าจอที่สอง ฉันจะซ่อนหน้าจอแรกเพื่อที่ฉันจะได้ไปที่หน้าจอที่สองได้โดยตรงทุกครั้งที่รีเฟรชโดยไม่ต้องเลื่อน แต่เมื่อฉันเขียนแอนิเมชั่นหน้าจอที่ 5 ฉันจำเป็นต้องซ่อนหน้าจอ n-1 ด้วยตนเอง - - - จากนั้นผู้นำก็เข้ามาและพูดว่า XXX มาให้ฉันดูเอฟเฟกต์ที่คุณทำ จากนั้นฉันต้องแสดงผลลัพธ์ที่ซ่อนไว้ก่อนหน้านี้ด้วยตนเอง หลังจากผ่านไปสิบวินาที ฉันยังคงพัฒนาและซ่อนมันอีกครั้ง - - - - ชีวิตมันสั้นนัก ฉันก็ทนไม่ไหว ดังนั้นคุณเพียงแค่ต้องทำสิ่งต่อไปนี้เพื่อพัฒนาอย่างมีความสุข:

 new PageSlider ( {
    pages : $ ( '.page-wrap .page' ) ,
    dev : 0 //0|1|2|3|...
} ) ;

6. เมื่อเปลี่ยนหน้า ภาพเคลื่อนไหวองค์ประกอบของหน้าจะดำเนินการเพียงครั้งเดียวเท่านั้น

บางครั้ง จะมีข้อกำหนดของผลิตภัณฑ์ที่หวังว่าเมื่อเพจถูกย้อนกลับ แอนิเมชั่น เช่น รายการจะไม่ถูกดำเนินการอีกต่อไป การดำเนินการเพียงครั้งเดียวก็เพียงพอ animationPlayOnce: true

 new PageSlider ( {
    pages : $ ( '.page-wrap .page' ) ,
    animationPlayOnce : true
} ) ;

7. หากเนื้อหายาวเกินหนึ่งหน้าจอ ให้เลื่อนไปจนสุดก่อนที่จะพลิกหน้า

นี่เป็นข้อกำหนดที่เกิดขึ้นได้ยากซึ่งกำหนดให้แต่ละหน้าจอต้องได้รับการออกแบบให้มีความสูงคงที่ เมื่อเลื่อนหน้าบนหน้าจอขนาดเล็ก จะไม่เปลี่ยนหน้าโดยตรง แต่เป็นการเลื่อนแบบเนทิฟ เมื่อเลื่อนถึงด้านล่าง หน้าจะถูกทริกเกอร์อีกครั้ง พลิกหน้า หากต้องการเอฟเฟกต์เฉพาะ คุณสามารถสแกนโค้ด QR ที่เกี่ยวข้องที่ด้านหลังเพื่อรับประสบการณ์ได้

 < div class =" page " style =" -webkit-overflow-scrolling: touch; " >
    < div class =" page__inner " style =" position: relative; height: 800px; " >
        < div class =" title " > page two </ div >
        < div class =" subtitle " > page two subtitle </ div >
        < div style =" position: absolute; left: 20px; bottom: 10% " > long page </ div >
        < div class =" arrow " > </ div >
    </ div >
</ div >

การตั้งค่า -webkit-overflow-scrolling: touch; บนองค์ประกอบ .page สามารถทริกเกอร์การเลื่อนแบบเนทีฟได้อย่างราบรื่น ทำให้การเลื่อนดูสะดวกสบายยิ่งขึ้น นอกจากนี้ยังไม่สามารถตั้งค่าได้ แต่เอฟเฟกต์จะแตกต่างกันมาก ค่าความสูงที่ใหญ่กว่าหน้าจอ เอฟเฟกต์นี้จะถูกทริกเกอร์ หากไม่ได้ตั้งค่าไว้ ค่าเริ่มต้นคือการสำรวจความสูงขององค์ประกอบลูกโดยตรงและเปรียบเทียบกับความสูงของหน้าจอเพื่อพิจารณาว่าเป็นหน้าเนื้อหาที่ยาวหรือไม่

8. การพลิกหน้าจะไม่ทริกเกอร์เมื่อปัดลง/ขึ้นเป็นครั้งแรก และการพลิกหน้าจะถูกทริกเกอร์ในครั้งที่สอง

บางครั้งคุณจะพบกับความต้องการดังกล่าว มีเนื้อหาบางอย่างที่ซ่อนอยู่ในเพจ แต่จะต้องแสดงเมื่อคุณเลื่อนลงเป็นครั้งแรก ในเวลานี้ คุณต้องปิดการใช้งานการเปลี่ยนหน้า จากนั้นจึงเลื่อนอีกครั้งหลังจากการโต้ตอบ เสร็จสิ้นเพื่อพลิกหน้า ที่นี่ มีตัวอย่างไว้เพื่อการอ้างอิงของผู้ใช้ ดูตัวอย่างด้านล่างสำหรับรายละเอียด

ตัวอย่าง

1.ค่าเริ่มต้น

2. ปัดไปทางซ้ายหรือขวา

3. ท่าทางต่อไปนี้

4. ล็อคหน้าจอ

5. ดำเนินการแอนิเมชั่นเพียงครั้งเดียว

6. หากเนื้อหายาวเกินหนึ่งหน้าจอ ให้เลื่อนไปจนสุดก่อนที่จะพลิกหน้า

7. การปัดครั้งแรกไม่เปลี่ยนหน้า การปัดครั้งที่สองไม่เปลี่ยนหน้า

สิ่งที่ต้องทำ

ดูว่าจำเป็นต้องใช้ฟังก์ชันต่อไปนี้ตามข้อกำหนดที่ตามมาหรือไม่:

1. วิธีการสลับภาพเคลื่อนไหวขนาด
2. วิธีการสลับภาพเคลื่อนไหวของหน้าปก

ข่าวประชาสัมพันธ์

0.2.4

• แก้ไขข้อผิดพลาดในการส่ง字符串ในวิธี moveTo
• อัปเกรด zepto เป็น 1.2.0

0.2.3

• เขียนวิธีการเปลี่ยนการใช้งานใหม่ จากการคำนวณแบบไดนามิกของความกว้างและความสูงของหน้าจอไปจนถึงการควบคุมสไตล์โดยตรง 100% และปัจจัยการสลับก็เปลี่ยนจาก px เฉพาะเป็น 100% แบบธรรมดา
• หลังจากการเปลี่ยนแปลงข้างต้น การปรับเปลี่ยนจะถูกควบคุมโดยสไตล์ด้วย และการตรวจสอบเหตุการณ์การปรับขนาดจะถูกลบออก
• เพิ่ม this.curPage ให้กับพารามิเตอร์การเรียกกลับเพื่อชี้ไปยังหน้าปัจจุบัน เวอร์ชันก่อนหน้านี้ถูกนำมาใช้ผ่าน this.pages.eq(this.index) แต่ในทางปฏิบัติแล้ว พารามิเตอร์นี้ปรากฏบ่อยมาก ดังนั้นจึงจัดเตรียมไว้โดยตรง

0.2.2 เพิ่มตัวอย่างการพลิกหน้าอีกหนึ่งตัวอย่าง เพิ่มอินเทอร์เฟซการเรียกกลับอีก 4 รายการ เช่น onSwipeUp และเพิ่มดัชนี prevIndex

0.2.1 เพิ่มฟังก์ชันการดำเนินการแอนิเมชั่นเพียงครั้งเดียว ก่อนเปลี่ยนการโทรกลับ และการเลื่อนไปยังจุดสิ้นสุดก่อนที่จะพลิกหน้าเมื่อเนื้อหาเกินหนึ่งหน้าจอ

0.2.0 ถูกเขียนใหม่โดยใช้ zepto โดยลบการโหลดล่วงหน้าและฟังก์ชันอื่นๆ ออก

0.1.0 ใช้ฟังก์ชันพื้นฐาน