PageSlider
1.0.0
PageSlider هو أحد مكونات الشاشة المنزلقة للمحطات الطرفية المتنقلة، وهو يدعم الانزلاق لأعلى ولأسفل، والانزلاق لليسار ولليمين، والانزلاق المحظور وغيرها من الوظائف.
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 >CSS
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 دون تخفيف التأثير عادة يتم التحكم في الرسوم المتحركة للعناصر الموجودة في الصفحة من خلال الأنماط، كما يلي:
. 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 > يعد التمرير الأولي لـ PageSlider بسيطًا نسبيًا، فهو يحدد بشكل مباشر الإيماءة اللازمة لتشغيل الشاشة، ومع ذلك، يحب أحد الأصدقاء أن يكون قادرًا على سحب الصفحة ورؤية الشاشة التالية عند تحريكها. هذه هي手势跟随التي قالها صديقي. لقد تخلى أيضًا عن استخدام PageSlider لأنه لم يكن لديه هذه الوظيفة، لذا فإن الإصدار الجديد يدعمها، ما عليك سوى ضبطها كما هو موضح على اليمين: gestureFollowing: true .
مع تطور الأعمال، يكون من الضروري أحيانًا قفل الشاشة الحالية وعدم الاستجابة للأحداث المنزلقة للمستخدم، ومن الضروري النقر فوق زر أو إكمال عمليات معينة قبل تحريك الشاشة تلقائيًا. يوفر هذا التحديث الطرق التالية للقفل:
< div class =" page " data-lock-next =" true " data-lock-prev =" true " > </ div > data-lock-next : حظر الانزلاق للخلف data-lock-prev : حظر الانزلاق للأمام
في بعض الأحيان، عندما تقفز الصفحة مرة أخرى، تريد العودة مباشرة إلى الصفحة التي قفزت إليها في المرة الأخيرة دون البدء من جديد، ما عليك سوى تعيينها كما هو موضح على اليمين: rememberLastVisited: true ، والذي سيحفظ فهرس الصفحة الحالية في التخزين المحلي. عند العودة فمن السهل أن تعمل على النحو التالي:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
rememberLastVisited : true ,
oninit : function ( ) {
//返回时，需告诉我们此时为返回动作而不是刷新，可以通过 hash 告诉我们
//PageSlider 所有回调接口 this 指向 PageSlider，方便进行操作
if (返回为 true ) {
this . moveTo ( this . lastVisitedIndex , true ) ;
}
}
} ) ;هذه عادة شخصية عندما كنت أقوم بالتطوير، افترضت أنه عند كتابة الرسوم المتحركة للشاشة الثانية، سأخفي الشاشة الأولى حتى أتمكن من الانتقال مباشرة إلى الشاشة الثانية في كل مرة أقوم بتحديثها دون الحاجة إلى الانزلاق. لكن عندما أكتب الرسوم المتحركة للشاشة الخامسة، أحتاج إلى إخفاء شاشات n-1 يدويًا. . . . ثم في هذا الوقت، جاء القائد وقال، XXX، تعال، دعني أرى التأثير الذي قمت به، وبعد ذلك يجب أن أعرض التأثيرات المخفية مسبقًا يدويًا، وبعد أكثر من عشر ثوانٍ، أواصل تطويرها وإخفائها مرة أخرى. . . . . الحياة قصيرة جدًا، لا أستطيع تحملها. لذلك، ما عليك سوى القيام بما يلي لتتطور بسعادة:
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
dev : 0 //0|1|2|3|...
} ) ; في بعض الأحيان، ستكون هناك متطلبات للمنتج تأمل أنه عند إرجاع الصفحة، لن يتم تنفيذ الإدخال والرسوم المتحركة الأخرى بعد الآن. ما عليك سوى تعيين animationPlayOnce: true .
new PageSlider ( {
pages : $ ( '.page-wrap .page' ) ,
animationPlayOnce : true
} ) ;وهذا متطلب نادر، حيث يتطلب تصميم كل شاشة بارتفاع ثابت. عند تحريك الصفحة على شاشة صغيرة، لا يتم قلب الصفحة مباشرة، ولكن التمرير الأصلي عندما يصل التمرير إلى الأسفل، يتم تشغيل الصفحة مرة أخرى عندما تنزلق الصفحة، اقلب الصفحة للحصول على التأثير المحدد، يمكنك أولاً مسح رمز الاستجابة السريعة المقابل في الخلف لتجربته.
< 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 إلى تشغيل التمرير السلس الأصلي، مما يجعل تجربة التمرير أكثر راحة، ومن الممكن أيضًا عدم ضبطه، ولكن التأثير مختلف تمامًا؛ قيمة ارتفاع أكبر من الشاشة، سيتم تشغيل هذا التأثير إذا لم يتم تعيينه، فإن القيمة الافتراضية هي اجتياز ارتفاع العناصر الفرعية المباشرة ومقارنتها بارتفاع الشاشة لتحديد ما إذا كانت صفحة محتوى طويلة.
في بعض الأحيان، قد تواجه مثل هذا الطلب، حيث يوجد بعض المحتوى المخفي على الصفحة، ولكن يجب عرضه عند الانزلاق لأسفل لأول مرة، ويجب عليك في هذا الوقت تعطيل قلب الصفحة، ثم التمرير مرة أخرى بعد التفاعل اكتمل لقلب الصفحة. هنا يتم توفير مثال لمرجع المستخدم راجع المثال أدناه للحصول على التفاصيل.
معرفة ما إذا كان من الضروري تنفيذ الوظائف التالية وفقًا للمتطلبات اللاحقة:
字符串في أسلوب moveTo
