From 1b35833f25f41fc6dedaaa1a7ff2a683179ff0cd Mon Sep 17 00:00:00 2001 From: lipten Date: Sat, 12 Jan 2019 17:25:52 +0800 Subject: [PATCH] update v3.2.0 --- README.md | 20 +++++++++++++++++--- dist/slidePage.min.css | 2 +- dist/slidePage.min.js | 2 +- examples/drag.html | 4 ++-- package.json | 2 +- slidePage.css | 4 ++-- 6 files changed, 24 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index f761cdc..96f2ae0 100644 --- a/README.md +++ b/README.md @@ -1,16 +1,15 @@ # slidePage - > slidePage现已推出3.0, 吸取了上一版本[slidePage v2.1.1](https://github.com/lipten/slidePage/tree/v2) 的各种经验，弥补不足，与v2.1.1不同的是移除了对jquery和zepto的依赖，精简到只有一个js文件，优化了接口调用方式，更适合主流的前端框架，另外还有基于vue的插件版本[vue-slidePage](https://github.com/lipten/vue-slidePage)和基于react的插件版本[react-slidePage](https://github.com/lipten/react-slidePage) - ### Demo: * [simple](http://lipten.link/projects/slidePage3/examples/simple.html) * [animated](http://lipten.link/projects/slidePage3/examples/animated.html) * [scroll](http://lipten.link/projects/slidePage3/examples/scroll.html) * [custom](http://lipten.link/projects/slidePage3/examples/custom.html) +* [dragMode](http://lipten.link/projects/slidePage3/examples/drag.html) * [fullFeatured](http://lipten.link/projects/slidePage3/examples/fullFeatured.html) ### Featured -slidePage3 特别适合主流前端框架开发，无任何依赖库，源代码只有12kb，Gzip压缩后仅有2.4k, 接口符合插件具有的初始化、销毁、重载的方法，适配PC和移动端，具有单屏内容滚动、手动播放动画、动态重绘等特色功能，具体查看完整示例: [fullFeatured](http://lipten.link/projects/slidePage3/examples/fullFeatured.html) +slidePage3 特别适合主流前端框架开发，无任何依赖库，Gzip压缩后仅有2.4k, 接口符合插件具有的初始化、销毁、重载的方法，适配PC和移动端，可实现内容超出屏幕滚动、手动播放动画、动态更新等特色功能，具体查看完整示例: [fullFeatured](http://lipten.link/projects/slidePage3/examples/fullFeatured.html) ### Documentation: * [Usage](#usage) @@ -70,6 +69,7 @@ var slidepage = new slidePage({ slidePages: '.slide-item', page: 1, refresh: true, + dragMode: false, useWheel: true, useSwipe: true, useAnimation : true, @@ -110,6 +110,12 @@ var slidepage = new slidePage({ 1 首次进入的page页码 + + dragMode + Boolean + false + 💡移动端开启触控拖动滑屏模式(此功能还在测试阶段)，默认为false，前提是`useSwipe: true` + useAnimation Boolean @@ -181,6 +187,14 @@ var slidepage = new slidePage({ 1. 在想要手动播放动画的元素上加上lazy类，并加上css动画类名即可使用动画，可以加上data-delay使触发时再延时播放; 2. 通过slidepage.slideFire(page)指定某一页的lazy动画触发播放。 +## Drag Mode +> 最新加入的拖动滑屏模式，在实例化时传入配置`dragMode: true`，即可开启，此功能目前为测试阶段，请酌情使用。 + +现已加入Demo系列豪华套餐： +* [dragMode](http://lipten.link/projects/slidePage3/examples/drag.html) + +需要注意的是，为了滑动松手后的动画体验更好，记得在你的项目里设置过渡动画类`.slide-container .slide-page.transition`，调整过渡函数和时长。具体查看示例代码：https://github.com/lipten/slidePage/blob/master/examples/drag.html#L13 + ## Methods ### slidepage.slideNext() diff --git a/dist/slidePage.min.css b/dist/slidePage.min.css index 6e47bb2..fcbf8c7 100644 --- a/dist/slidePage.min.css +++ b/dist/slidePage.min.css @@ -1 +1 @@ -.slide-container{width:100%;height:100%;overflow:hidden;position:relative}.slide-container .slide-page{position:absolute;top:0;left:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-text-size-adjust:none;-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;background-position:center}.slide-container .slide-page{transform:translate3d(0,100%,0);-webkit-transform:translate3d(0,100%,0)}.slide-container .slide-page.transition{transition:all .7s cubic-bezier(.55,.085,0,.99);-webkit-transition:all .7s cubic-bezier(.55,.085,0,.99)} \ No newline at end of file +.slide-container{width:100%;height:100%;overflow:hidden;position:relative}.slide-container .slide-page{position:absolute;top:0;left:0;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;-webkit-tap-highlight-color:rgba(255,255,255,0);-webkit-text-size-adjust:none;-webkit-backface-visibility:hidden;-webkit-transform-style:preserve-3d;background-position:center}.slide-container .slide-page{transform:translate3d(0,100%,0);-webkit-transform:translate3d(0,100%,0)}.slide-container .slide-page.transition{transition:transform .7s cubic-bezier(.55,.085,0,.99);-webkit-transition:transform .7s cubic-bezier(.55,.085,0,.99)} \ No newline at end of file diff --git a/dist/slidePage.min.js b/dist/slidePage.min.js index 5dcc63e..7a50a1b 100644 --- a/dist/slidePage.min.js +++ b/dist/slidePage.min.js @@ -1 +1 @@ -"use strict";var _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t};"classList"in document.documentElement||Object.defineProperty(HTMLElement.prototype,"classList",{get:function(){var t=this;function e(e){return function(i){var n=t.className.split(/\s+/g),s=n.indexOf(i);e(n,s,i),t.className=n.join(" ")}}return{add:e(function(t,e,i){~e||t.push(i)}),remove:e(function(t,e){~e&&t.splice(e,1)}),toggle:e(function(t,e,i){~e?t.splice(e,1):t.push(i)}),contains:function(e){return!!~t.className.split(/\s+/g).indexOf(e)},item:function(e){return t.className.split(/\s+/g)[e]||null}}}}),function(t,e){"function"==typeof define&&define.amd?define([],function(){return e(t,t.document)}):"object"===("undefined"==typeof exports?"undefined":_typeof(exports))?module.exports=e(t,t.document):t.slidePage=e(t,t.document)}("undefined"!=typeof window?window:void 0,function(t,e){var i=!1;try{var n=Object.defineProperty({},"passive",{get:function(){i=!0}});t.addEventListener("test",null,n)}catch(t){}var s=function(e){var i=new RegExp("(^|&)"+e+"=([^&]*)(&|$)"),n=t.location.search.substr(1).match(i);return null!=n?unescape(n[2]):null},r=function(t,e){for(var i in e)t[i]=e[i];return t},o=function(t,e){var i=t.nodeName===e.nodeName,n=t.nodeType===e.nodeType,s=t.innerHTML===e.innerHTML;return t.className.replace(/ transition/g,"")===e.className.replace(/ transition/g,"")&&i&&n&&s},a=function(t){if(t instanceof NodeList||t instanceof HTMLCollection&&t.length>0){for(var e=0,i=0,n=t.length;i0?this.canSlide&&this.canNext&&this.slideNext():(e.wheelDeltaY>0||e.wheelDelta>0||e.detail<0)&&this.canSlide&&this.canPrev&&this.slidePrev())}},touchStart:function(t){l.startpoint=t.targetTouches[0].clientY},touchMove:function(t){var e=t.targetTouches[0].clientY-l.startpoint;!this.canPrev&&e>5&&(this.isScroll=!0),!this.canNext&&e<-5&&(this.isScroll=!0),!this.isScroll&&t.preventDefault(),l.endpoint=t.targetTouches[0].clientY},touchEnd:function(t){if(0===l.endpoint)return!1;l.endpoint-l.startpoint<-60?this.canSlide&&this.canNext&&this.slideNext():l.endpoint-l.startpoint>60&&this.canSlide&&this.canPrev&&this.slidePrev(),l.startpoint=0,l.endpoint=0},transitionEnd:function(t){t.target.isEqualNode(this.items[this.page-1])&&("next"==this.direction?(this.opt.after(this.page-1,this.direction,this.page),this.opt.refresh&&d.resetAnimation.call(this,this.page-2)):"prev"==this.direction&&(this.opt.after(this.page+1,this.direction,this.page),this.opt.refresh&&d.resetAnimation.call(this,this.page)),this.canSlide=!0)}},d={slideScroll:function(e){var i=this.items[e].children[0].offsetHeight,n=t.innerHeight,s=function(e){var n=t.innerHeight,s=i<=this.items[e].scrollTop+n,r=0==this.items[e].scrollTop;this.canPrev=r&&!s,this.canNext=s&&!r,this.isScroll=!(s||r)}.bind(this);i-n>20?(this.items[e].children[0].children[0].focus(),s(e),"next"==this.direction?this.items[e].scrollTop=0:"prev"==this.direction&&(this.items[e].scrollTop=i-n),this.items[e].addEventListener("scroll",function(t){s(e)})):(this.canPrev=!0,this.canNext=!0,this.isScroll=!1)},resetAnimation:function(e){if(this.opt.useAnimation&&this.opt.refresh){if(!this.items[e])return!1;var i=this.items[e].querySelectorAll(".step"),n=this.items[e].querySelectorAll(".lazy");if(i.length>0){var s=!0,r=!1,o=void 0;try{for(var a,l=Array.from(i)[Symbol.iterator]();!(s=(a=l.next()).done);s=!0){(p=a.value).style.visibility="hidden",p.style.animationName="__"+t.getComputedStyle(p).animationName}}catch(t){r=!0,o=t}finally{try{!s&&l.return&&l.return()}finally{if(r)throw o}}}if(n.length>0){var h=!0,c=!1,d=void 0;try{for(var u,f=Array.from(n)[Symbol.iterator]();!(h=(u=f.next()).done);h=!0){var p;(p=u.value).style.visibility="hidden",p.style.animationName="__"+t.getComputedStyle(p).animationName}}catch(t){c=!0,d=t}finally{try{!h&&f.return&&f.return()}finally{if(c)throw d}}}}},runAnimation:function(t,e){if(this.opt.useAnimation){var i=function(t){var e=t.getAttribute("data-delay")||100,i=setTimeout(function(){t.style.visibility="",t.style.animationName="",clearTimeout(i)},e)},n=this.items[t].querySelectorAll(e||".step"),s=!0,r=!1,o=void 0;try{for(var a,l=Array.from(n)[Symbol.iterator]();!(s=(a=l.next()).done);s=!0){i(a.value)}}catch(t){r=!0,o=t}finally{try{!s&&l.return&&l.return()}finally{if(r)throw o}}}},initAnimation:function(e,i){if(this.opt.useAnimation){var n=this.container.querySelectorAll(".step"),s=this.container.querySelectorAll(".lazy");if(n.length>0){var r=!0,o=!1,a=void 0;try{for(var l,h=Array.from(n)[Symbol.iterator]();!(r=(l=h.next()).done);r=!0){(v=l.value).style.visibility="hidden",v.style.animationName="__"+t.getComputedStyle(v).animationName}}catch(t){o=!0,a=t}finally{try{!r&&h.return&&h.return()}finally{if(o)throw a}}}if(s.length>0){var c=!0,u=!1,f=void 0;try{for(var p,m=Array.from(s)[Symbol.iterator]();!(c=(p=m.next()).done);c=!0){var v;(v=p.value).style.visibility="hidden",v.style.animationName="__"+t.getComputedStyle(v).animationName}}catch(t){u=!0,f=t}finally{try{!c&&m.return&&m.return()}finally{if(u)throw f}}}d.runAnimation.call(this,i)}for(var y,g=0;y=this.items[g];g++)g===i?y.style.transform="translate3d(0, 0, 0)":gi&&(y.style.transform="translate3d(0, 100%, 0)"),function(t){var e=setTimeout(function(){t.classList&&t.classList.add instanceof Function&&t.classList.add("transition"),clearTimeout(e)})}(y)},initEvent:function(){this.opt.useWheel&&(e.addEventListener("DOMMouseScroll",this.eventHandler.wheelFunc,!!i&&{passive:!0}),e.addEventListener("mousewheel",this.eventHandler.wheelFunc,!!i&&{passive:!0})),this.opt.useSwipe&&(l={startpoint:0,endpoint:0},this.container.addEventListener("touchstart",this.eventHandler.touchStart,!!i&&{passive:!0}),this.container.addEventListener("touchmove",this.eventHandler.touchMove),this.container.addEventListener("touchend",this.eventHandler.touchEnd,!!i&&{passive:!0})),this.container.addEventListener("transitionend",this.eventHandler.transitionEnd)}},u=function(t){var i={page:1*s("page")||1,slidePages:".slide-page",slideContainer:".slide-container",after:function(){},before:function(){},refresh:!1,useWheel:!0,useSwipe:!0,useAnimation:!0};this.canSlide=!0,this.canNext=!0,this.canPrev=!0,this.isScroll=!1,this.opt=r(i,t),this.page=this.opt.page,this.container=a(this.opt.slideContainer)?this.opt.slideContainer:e.querySelector(this.opt.slideContainer),this.items=a(this.opt.slidePages)?this.opt.slidePages:e.querySelectorAll(this.opt.slidePages),this.count=this.items.length,this.direction="",this.eventHandler={};for(var n in c)this.eventHandler[n]=c[n].bind(this);d.initEvent.call(this),d.slideScroll.call(this,this.page-1),d.initAnimation.call(this,this.items,this.page-1),this.slideTo(this.page)};return u.prototype.slideNext=function(t){if(this.count<=this.page)return!1;this.direction="next",d.slideScroll.call(this,this.page),this.items[this.page-1].style.transform="translate3d(0, -100%, 0)",this.items[this.page].style.transform="translate3d(0, 0, 0)",this.page++,this.opt.before(this.page-1,this.direction,this.page),t||(this.canSlide=!1,d.runAnimation.call(this,this.page-1))},u.prototype.slidePrev=function(t){if(1>=this.page)return!1;this.direction="prev",d.slideScroll.call(this,this.page-2),this.items[this.page-2].style.transform="translate3d(0, 0, 0)",this.items[this.page-1].style.transform="translate3d(0, 100%, 0)",this.page--,this.opt.before(this.page+1,this.direction,this.page),t||(this.canSlide=!1,d.runAnimation.call(this,this.page-1))},u.prototype.slideTo=function(t){if(t>=1&&t<=this.count){if(t==this.page)return!1;if(t>this.page){for(var e=this.page+1;et;e--)this.slidePrev("optimize");this.slidePrev()}}},u.prototype.slideFire=function(t){var e=t?t-1:this.page-1;d.runAnimation.call(this,e,".lazy")},u.prototype.destroy=function(){if(this.opt.useAnimation){this.items.length;var t=this.container.querySelectorAll(".step"),i=this.container.querySelectorAll(".lazy");if(t.length>0){var n=!0,s=!1,r=void 0;try{for(var o,a=t[Symbol.iterator]();!(n=(o=a.next()).done);n=!0){o.value.style.visibility=""}}catch(t){s=!0,r=t}finally{try{!n&&a.return&&a.return()}finally{if(s)throw r}}}if(i.length>0){var l=!0,h=!1,c=void 0;try{for(var u,f=i[Symbol.iterator]();!(l=(u=f.next()).done);l=!0){u.value.style.visibility=""}}catch(t){h=!0,c=t}finally{try{!l&&f.return&&f.return()}finally{if(h)throw c}}}d.runAnimation.call(this,0)}if(this.opt.useWheel&&(e.removeEventListener("DOMMouseScroll",this.eventHandler.wheelFunc),e.removeEventListener("mousewheel",this.eventHandler.wheelFunc),this.items[this.page-1].style.transform="translate3d(0, 0, 0)"),this.opt.useSwipe){this.container.removeEventListener("touchstart",this.eventHandler.touchStart),this.container.removeEventListener("touchmove",this.eventHandler.touchMove),this.container.removeEventListener("touchend",this.eventHandler.touchEnd)}this.container.removeEventListener("transitionend",this.eventHandler.transitionEnd)},u.prototype.update=function(t){this.canSlide=!0,this.canNext=!0,this.canPrev=!0;for(var i=a(t)?t:e.querySelectorAll(this.opt.slidePages),n=0,s=i.length;nthis.page&&this.canNext&&(this.items[this.page-1].style.transform="translate3d(0, "+e.toFixed(2)+"px, 0)",this.items[this.page].style.transform="translate3d(0, "+(g.innerHeight+e).toFixed(2)+"px, 0)",o.endpoint=t.targetTouches[0].clientY),5this.page){for(var e=this.page+1;e