From 7d75c2ebd41ea22527a31e2f0bb43dd9e0bc147a Mon Sep 17 00:00:00 2001 From: Hamilton Date: Mon, 7 Aug 2017 12:04:24 +0800 Subject: [PATCH 1/3] [Swipe]Add method swipeTo to easier translate Signed-off-by: Hamilton --- README.MD | 30 ++++++++++++++++++++++++++++++ dist/vue-swipe.css | 2 +- dist/vue-swipe.js | 2 +- example/index.html | 7 +++++-- example/index.js | 4 ++-- package.json | 6 +++--- src/swipe.vue | 39 +++++++++++++++++++++++++++++++++++++++ 7 files changed, 81 insertions(+), 9 deletions(-) diff --git a/README.MD b/README.MD index 0f22fd4..86489e6 100644 --- a/README.MD +++ b/README.MD @@ -8,6 +8,36 @@ vue-swipe is a touch slider for vue.js. $ npm install vue-swipe ``` +# for JavaScript user : +install NodeJs first, then install npm plugins for conpile: +## install vue package: https://cn.vuejs.org/v2/guide/installation.html#Bower +npm install -g vue +npm install --global vue-cli +## install webpack package: https://webpack.github.io/docs/webpack-dev-server.html +npm install -g webpack-dev-server +## compile : +npm install vue -save-dev +npm install vue-loader -save-dev +npm install vue-template-compiler -save-dev +npm install +npm run build // now file dist/vue-swipe.css and dist/vue-swipe.js is available +npm run dev // Open http://localhost:8080/example/ in browser + +# Detail for code usage : +```JavaScript +swipeEle = new Vue({ + el: '#container', + components: { + 'swipe': vueSwipe, + 'swipe-item': vueSwipeItem + } +}).$children[0]; + +swipeWidth = swipeEle.$el.clientWidth; +swipeEle.next(); +swipeEle.prev(); +swipeEle.doAnimate(undefined, opt); + # Install ## Import using module diff --git a/dist/vue-swipe.css b/dist/vue-swipe.css index a34bd86..a28b08a 100644 --- a/dist/vue-swipe.css +++ b/dist/vue-swipe.css @@ -1 +1 @@ -.mint-swipe,.mint-swipe-items-wrap{overflow:hidden;position:relative;height:100%}.mint-swipe-items-wrap>div{position:absolute;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100%;height:100%;display:none}.mint-swipe-items-wrap>div.is-active{display:block;-webkit-transform:none;transform:none}.mint-swipe-indicators{position:absolute;bottom:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mint-swipe-indicator{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2;margin:0 3px}.mint-swipe-indicator.is-active{background:#fff} \ No newline at end of file +.mint-swipe,.mint-swipe-items-wrap{overflow:hidden;position:relative;height:100%}.mint-swipe-items-wrap{-webkit-transform:translateZ(0);transform:translateZ(0)}.mint-swipe-items-wrap>div{position:absolute;-webkit-transform:translateX(-100%);transform:translateX(-100%);width:100%;height:100%;display:none}.mint-swipe-items-wrap>div.is-active{display:block;-webkit-transform:none;transform:none}.mint-swipe-indicators{position:absolute;bottom:10px;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.mint-swipe-indicator{width:8px;height:8px;display:inline-block;border-radius:100%;background:#000;opacity:.2;margin:0 3px}.mint-swipe-indicator.is-active{background:#fff} \ No newline at end of file diff --git a/dist/vue-swipe.js b/dist/vue-swipe.js index 7bb3b80..3a89320 100644 --- a/dist/vue-swipe.js +++ b/dist/vue-swipe.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSwipe=e():t.VueSwipe=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={exports:{},id:i,loaded:!1};return t[i].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{"default":t}}Object.defineProperty(e,"__esModule",{value:!0}),e.SwipeItem=e.Swipe=void 0;var s=n(7),a=i(s),r=n(6),o=i(r);e.Swipe=a["default"],e.SwipeItem=o["default"]},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e["default"]={name:"mt-swipe-item",mounted:function(){this.$parent&&this.$parent.swipeItemCreated(this)},destroyed:function(){this.$parent&&this.$parent.swipeItemDestroyed(this)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(4),s=n(3);e["default"]={name:"mt-swipe",created:function(){this.dragState={}},data:function(){return{ready:!1,dragging:!1,userScrolling:!1,animating:!1,index:0,pages:[],timer:null,reInitTimer:null,noDrag:!1}},props:{speed:{type:Number,"default":300},auto:{type:Number,"default":3e3},continuous:{type:Boolean,"default":!0},showIndicators:{type:Boolean,"default":!0},noDragWhenSingle:{type:Boolean,"default":!0},prevent:{type:Boolean,"default":!1}},methods:{swipeItemCreated:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},swipeItemDestroyed:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},translate:function(t,e,n,s){var a=this,r=arguments;if(n){this.animating=!0,t.style.webkitTransition="-webkit-transform "+n+"ms ease-in-out",setTimeout(function(){t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},50);var o=!1,l=function(){o||(o=!0,a.animating=!1,t.style.webkitTransition="",t.style.webkitTransform="",s&&s.apply(a,r))};(0,i.once)(t,"webkitTransitionEnd",l),setTimeout(l,n+100)}else t.style.webkitTransition="",t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},reInitPages:function(){var t=this.$children;this.noDrag=1===t.length&&this.noDragWhenSingle;var e=[];this.index=0,t.forEach(function(t,n){e.push(t.$el),(0,s.removeClass)(t.$el,"is-active"),0===n&&(0,s.addClass)(t.$el,"is-active")}),this.pages=e},doAnimate:function(t,e){var n=this;if(0!==this.$children.length&&(e||!(this.$children.length<2))){var i,a,r,o,l,u=this.speed||300,c=this.index,d=this.pages,h=d.length;e?(i=e.prevPage,r=e.currentPage,a=e.nextPage,o=e.pageWidth,l=e.offsetLeft):(o=this.$el.clientWidth,r=d[c],i=d[c-1],a=d[c+1],this.continuous&&d.length>1&&(i||(i=d[d.length-1]),a||(a=d[0])),i&&(i.style.display="block",this.translate(i,-o)),a&&(a.style.display="block",this.translate(a,o)));var f,p=this.$children[c].$el;"prev"===t?(c>0&&(f=c-1),this.continuous&&0===c&&(f=h-1)):"next"===t&&(h-1>c&&(f=c+1),this.continuous&&c===h-1&&(f=0));var g=function(){if(void 0!==f){var t=n.$children[f].$el;(0,s.removeClass)(p,"is-active"),(0,s.addClass)(t,"is-active"),n.index=f}i&&(i.style.display=""),a&&(a.style.display="")};setTimeout(function(){"next"===t?(n.translate(r,-o,u,g),a&&n.translate(a,0,u)):"prev"===t?(n.translate(r,o,u,g),i&&n.translate(i,0,u)):(n.translate(r,0,u,g),"undefined"!=typeof l?(i&&l>0&&n.translate(i,-1*o,u),a&&0>l&&n.translate(a,o,u)):(i&&n.translate(i,-1*o,u),a&&n.translate(a,o,u)))},10)}},next:function(){this.doAnimate("next")},prev:function(){this.doAnimate("prev")},doOnTouchStart:function(t){if(!this.noDrag){var e=this.$el,n=this.dragState,i=t.touches[0];n.startTime=new Date,n.startLeft=i.pageX,n.startTop=i.pageY,n.startTopAbsolute=i.clientY,n.pageWidth=e.offsetWidth,n.pageHeight=e.offsetHeight;var s=this.$children[this.index-1],a=this.$children[this.index],r=this.$children[this.index+1];this.continuous&&this.pages.length>1&&(s||(s=this.$children[this.$children.length-1]),r||(r=this.$children[0])),n.prevPage=s?s.$el:null,n.dragPage=a?a.$el:null,n.nextPage=r?r.$el:null,n.prevPage&&(n.prevPage.style.display="block"),n.nextPage&&(n.nextPage.style.display="block")}},doOnTouchMove:function(t){if(!this.noDrag){var e=this.dragState,n=t.touches[0];e.currentLeft=n.pageX,e.currentTop=n.pageY,e.currentTopAbsolute=n.clientY;var i=e.currentLeft-e.startLeft,s=e.currentTopAbsolute-e.startTopAbsolute,a=Math.abs(i),r=Math.abs(s);if(5>a||a>=5&&r>=1.73*a)return void(this.userScrolling=!0);this.userScrolling=!1,t.preventDefault(),i=Math.min(Math.max(-e.pageWidth+1,i),e.pageWidth-1);var o=0>i?"next":"prev";e.prevPage&&"prev"===o&&this.translate(e.prevPage,i-e.pageWidth),this.translate(e.dragPage,i),e.nextPage&&"next"===o&&this.translate(e.nextPage,i+e.pageWidth)}},doOnTouchEnd:function(){if(!this.noDrag){var t=this.dragState,e=new Date-t.startTime,n=null,i=t.currentLeft-t.startLeft,s=t.currentTop-t.startTop,a=t.pageWidth,r=this.index,o=this.pages.length;if(300>e){var l=Math.abs(i)<5&&Math.abs(s)<5;(isNaN(i)||isNaN(s))&&(l=!0),l&&this.$children[this.index].$emit("tap")}300>e&&void 0===t.currentLeft||((300>e||Math.abs(i)>a/2)&&(n=0>i?"next":"prev"),this.continuous||(0===r&&"prev"===n||r===o-1&&"next"===n)&&(n=null),this.$children.length<2&&(n=null),this.doAnimate(n,{offsetLeft:i,pageWidth:t.pageWidth,prevPage:t.prevPage,currentPage:t.dragPage,nextPage:t.nextPage}),this.dragState={})}}},destroyed:function(){this.timer&&(clearInterval(this.timer),this.timer=null),this.reInitTimer&&(clearTimeout(this.reInitTimer),this.reInitTimer=null)},mounted:function(){var t=this;this.ready=!0,this.auto>0&&(this.timer=setInterval(function(){t.dragging||t.animating||t.next()},this.auto)),this.reInitPages();var e=this.$el;e.addEventListener("touchstart",function(e){t.prevent&&e.preventDefault(),t.animating||(t.dragging=!0,t.userScrolling=!1,t.doOnTouchStart(e))}),e.addEventListener("touchmove",function(e){t.dragging&&t.doOnTouchMove(e)}),e.addEventListener("touchend",function(e){return t.userScrolling?(t.dragging=!1,void(t.dragState={})):void(t.dragging&&(t.doOnTouchEnd(e),t.dragging=!1))})}}},function(t,e){"use strict";var n=function(t){return(t||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},i=function(t,e){if(!t||!e)return!1;if(-1!=e.indexOf(" "))throw new Error("className should not contain space.");return t.classList?t.classList.contains(e):(" "+t.className+" ").indexOf(" "+e+" ")>-1},s=function(t,e){if(t){for(var n=t.className,s=(e||"").split(" "),a=0,r=s.length;r>a;a++){var o=s[a];o&&(t.classList?t.classList.add(o):i(t,o)||(n+=" "+o))}t.classList||(t.className=n)}},a=function(t,e){if(t&&e){for(var s=e.split(" "),a=" "+t.className+" ",r=0,o=s.length;o>r;r++){var l=s[r];l&&(t.classList?t.classList.remove(l):i(t,l)&&(a=a.replace(" "+l+" "," ")))}t.classList||(t.className=n(a))}};t.exports={hasClass:i,addClass:s,removeClass:a}},function(t,e){"use strict";var n=function(){return document.addEventListener?function(t,e,n){t&&e&&n&&t.addEventListener(e,n,!1)}:function(t,e,n){t&&e&&n&&t.attachEvent("on"+e,n)}}(),i=function(){return document.removeEventListener?function(t,e,n){t&&e&&t.removeEventListener(e,n,!1)}:function(t,e,n){t&&e&&t.detachEvent("on"+e,n)}}(),s=function(t,e,s){var a=function r(){s&&s.apply(this,arguments),i(t,e,r)};n(t,e,a)};t.exports={on:n,off:i,once:s}},function(t,e){},function(t,e,n){var i,s;i=n(1);var a=n(9);s=i=i||{},("object"==typeof i["default"]||"function"==typeof i["default"])&&(s=i=i["default"]),"function"==typeof s&&(s=s.options),s.render=a.render,s.staticRenderFns=a.staticRenderFns,t.exports=i},function(t,e,n){var i,s;n(5),i=n(2);var a=n(8);s=i=i||{},("object"==typeof i["default"]||"function"==typeof i["default"])&&(s=i=i["default"]),"function"==typeof s&&(s=s.options),s.render=a.render,s.staticRenderFns=a.staticRenderFns,t.exports=i},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"mint-swipe"},[n("div",{ref:"wrap",staticClass:"mint-swipe-items-wrap"},[t._t("default")],2),t._v(" "),n("div",{directives:[{name:"show",rawName:"v-show",value:t.showIndicators,expression:"showIndicators"}],staticClass:"mint-swipe-indicators"},t._l(t.pages,function(e,i){return n("div",{staticClass:"mint-swipe-indicator","class":{"is-active":i===t.index}})}))])},staticRenderFns:[]}},function(t,e){t.exports={render:function(){var t=this,e=t.$createElement,n=t._self._c||e;return n("div",{staticClass:"mint-swipe-item"},[t._t("default")],2)},staticRenderFns:[]}}])}); \ No newline at end of file +!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSwipe=e():t.VueSwipe=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={exports:{},id:i,loaded:!1};return t[i].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.SwipeItem=e.Swipe=void 0;var s=n(7),a=i(s),r=n(6),o=i(r);e.Swipe=a.default,e.SwipeItem=o.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"mt-swipe-item",mounted:function(){this.$parent&&this.$parent.swipeItemCreated(this)},destroyed:function(){this.$parent&&this.$parent.swipeItemDestroyed(this)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(4),s=n(3);e.default={name:"mt-swipe",created:function(){this.dragState={}},data:function(){return{ready:!1,dragging:!1,userScrolling:!1,animating:!1,index:0,pages:[],timer:null,reInitTimer:null,noDrag:!1}},props:{speed:{type:Number,default:300},auto:{type:Number,default:3e3},continuous:{type:Boolean,default:!0},showIndicators:{type:Boolean,default:!0},noDragWhenSingle:{type:Boolean,default:!0},prevent:{type:Boolean,default:!1}},methods:{swipeItemCreated:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},swipeItemDestroyed:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},translate:function(t,e,n,s){var a=this,r=arguments;if(n){this.animating=!0,t.style.webkitTransition="-webkit-transform "+n+"ms ease-in-out",setTimeout(function(){t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},50);var o=!1,l=function(){o||(o=!0,a.animating=!1,t.style.webkitTransition="",t.style.webkitTransform="",s&&s.apply(a,r))};(0,i.once)(t,"webkitTransitionEnd",l),setTimeout(l,n+100)}else t.style.webkitTransition="",t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},reInitPages:function(){var t=this.$children;this.noDrag=1===t.length&&this.noDragWhenSingle;var e=[];this.index=0,t.forEach(function(t,n){e.push(t.$el),(0,s.removeClass)(t.$el,"is-active"),0===n&&(0,s.addClass)(t.$el,"is-active")}),this.pages=e},doAnimate:function(t,e){var n=this;if(0!==this.$children.length&&(e||!(this.$children.length<2))){var i,a,r,o,l,c=this.speed||300,d=this.index,u=this.pages,h=u.length;e?(i=e.prevPage,r=e.currentPage,a=e.nextPage,o=e.pageWidth,l=e.offsetLeft):(o=this.$el.clientWidth,r=u[d],i=u[d-1],a=u[d+1],this.continuous&&u.length>1&&(i||(i=u[u.length-1]),a||(a=u[0])),i&&(i.style.display="block",this.translate(i,-o)),a&&(a.style.display="block",this.translate(a,o)));var f,p=this.$children[d].$el;"prev"===t?(d>0&&(f=d-1),this.continuous&&0===d&&(f=h-1)):"next"===t&&(d0&&n.translate(i,o*-1,c),a&&l<0&&n.translate(a,o,c)):(i&&n.translate(i,o*-1,c),a&&n.translate(a,o,c)))},10)}},swipeTo:function(t){var e=this;if(0!==this.$children.length&&!(this.$children.length<2)){var n,i,a,r=this.speed||300,o=this.pages,l=(o.length,this.index),c=t>l;if(!(t>=o.length||t<0)){a=this.$el.clientWidth*(c?1:-1),n=o[l],i=o[t];var d=t,u=this.$children[l].$el;i.style.display="block",this.translate(i,a);var h=function(){if(void 0!==d){var t=e.$children[d].$el;(0,s.removeClass)(u,"is-active"),(0,s.addClass)(t,"is-active"),e.index=d}};setTimeout(function(){e.translate(n,-a,r,h),e.translate(i,0,r)},10)}}},next:function(){this.doAnimate("next")},prev:function(){this.doAnimate("prev")},doOnTouchStart:function(t){if(!this.noDrag){var e=this.$el,n=this.dragState,i=t.touches[0];n.startTime=new Date,n.startLeft=i.pageX,n.startTop=i.pageY,n.startTopAbsolute=i.clientY,n.pageWidth=e.offsetWidth,n.pageHeight=e.offsetHeight;var s=this.$children[this.index-1],a=this.$children[this.index],r=this.$children[this.index+1];this.continuous&&this.pages.length>1&&(s||(s=this.$children[this.$children.length-1]),r||(r=this.$children[0])),n.prevPage=s?s.$el:null,n.dragPage=a?a.$el:null,n.nextPage=r?r.$el:null,n.prevPage&&(n.prevPage.style.display="block"),n.nextPage&&(n.nextPage.style.display="block")}},doOnTouchMove:function(t){if(!this.noDrag){var e=this.dragState,n=t.touches[0];e.currentLeft=n.pageX,e.currentTop=n.pageY,e.currentTopAbsolute=n.clientY;var i=e.currentLeft-e.startLeft,s=e.currentTopAbsolute-e.startTopAbsolute,a=Math.abs(i),r=Math.abs(s);if(a<5||a>=5&&r>=1.73*a)return void(this.userScrolling=!0);this.userScrolling=!1,t.preventDefault(),i=Math.min(Math.max(-e.pageWidth+1,i),e.pageWidth-1);var o=i<0?"next":"prev";e.prevPage&&"prev"===o&&this.translate(e.prevPage,i-e.pageWidth),this.translate(e.dragPage,i),e.nextPage&&"next"===o&&this.translate(e.nextPage,i+e.pageWidth)}},doOnTouchEnd:function(){if(!this.noDrag){var t=this.dragState,e=new Date-t.startTime,n=null,i=t.currentLeft-t.startLeft,s=t.currentTop-t.startTop,a=t.pageWidth,r=this.index,o=this.pages.length;if(e<300){var l=Math.abs(i)<5&&Math.abs(s)<5;(isNaN(i)||isNaN(s))&&(l=!0),l&&this.$children[this.index].$emit("tap")}e<300&&void 0===t.currentLeft||((e<300||Math.abs(i)>a/2)&&(n=i<0?"next":"prev"),this.continuous||(0===r&&"prev"===n||r===o-1&&"next"===n)&&(n=null),this.$children.length<2&&(n=null),this.doAnimate(n,{offsetLeft:i,pageWidth:t.pageWidth,prevPage:t.prevPage,currentPage:t.dragPage,nextPage:t.nextPage}),this.dragState={})}}},destroyed:function(){this.timer&&(clearInterval(this.timer),this.timer=null),this.reInitTimer&&(clearTimeout(this.reInitTimer),this.reInitTimer=null)},mounted:function(){var t=this;this.ready=!0,this.auto>0&&(this.timer=setInterval(function(){t.dragging||t.animating||t.next()},this.auto)),this.reInitPages();var e=this.$el;e.addEventListener("touchstart",function(e){t.prevent&&e.preventDefault(),t.animating||(t.dragging=!0,t.userScrolling=!1,t.doOnTouchStart(e))}),e.addEventListener("touchmove",function(e){t.dragging&&t.doOnTouchMove(e)}),e.addEventListener("touchend",function(e){return t.userScrolling?(t.dragging=!1,void(t.dragState={})):void(t.dragging&&(t.doOnTouchEnd(e),t.dragging=!1))})}}},function(t,e){"use strict";var n=function(t){return(t||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},i=function(t,e){if(!t||!e)return!1;if(e.indexOf(" ")!=-1)throw new Error("className should not contain space.");return t.classList?t.classList.contains(e):(" "+t.className+" ").indexOf(" "+e+" ")>-1},s=function(t,e){if(t){for(var n=t.className,s=(e||"").split(" "),a=0,r=s.length;a
- + Slide1 Slide2 Slide3 + Slide4 + Slide5 + Slide6
@@ -50,6 +53,6 @@ - + diff --git a/example/index.js b/example/index.js index c40340c..69dba32 100644 --- a/example/index.js +++ b/example/index.js @@ -1,10 +1,10 @@ const vueSwipe = VueSwipe.Swipe; const vueSwipeItem = VueSwipe.SwipeItem; -new Vue({ +swipeEle = new Vue({ el: '#container', components: { 'swipe': vueSwipe, 'swipe-item': vueSwipeItem } -}); +}).$children[0]; diff --git a/package.json b/package.json index 30b43a6..9bd783b 100644 --- a/package.json +++ b/package.json @@ -38,11 +38,11 @@ "file-loader": "^0.8.5", "style-loader": "^0.13.0", "url-loader": "^0.5.7", - "vue": "2.1.8", + "vue": "^2.4.2", "vue-hot-reload-api": "^1.2.2", "vue-html-loader": "^1.0.0", - "vue-loader": "10.0.2", - "vue-template-compiler": "^2.1.8", + "vue-loader": "^10.0.2", + "vue-template-compiler": "^2.4.2", "webpack": "^1.12.9", "webpack-dev-server": "^1.14.0" }, diff --git a/src/swipe.vue b/src/swipe.vue index 860bab8..0ceac16 100644 --- a/src/swipe.vue +++ b/src/swipe.vue @@ -291,6 +291,45 @@ } }, 10); }, + + swipeTo(toIdx) { + if (this.$children.length === 0) return; + if (this.$children.length < 2) return; + + var currentPage, toPage, pageWidth; + var speed = this.speed || 300; + var pages = this.pages; + var pageCount = pages.length; + var index = this.index; + var isNext = toIdx > index; + if(toIdx >= pages.length ) return; + if(toIdx < 0 ) return; + + pageWidth = this.$el.clientWidth * (isNext ? 1 : -1); + currentPage = pages[index]; + toPage = pages[toIdx]; + + var newIndex = toIdx; + var oldPage = this.$children[index].$el; + + toPage.style.display = 'block'; + this.translate(toPage, pageWidth); + + var callback = () => { + if (newIndex !== undefined) { + var newPage = this.$children[newIndex].$el; + removeClass(oldPage, 'is-active'); + addClass(newPage, 'is-active'); + + this.index = newIndex; + } + }; + + setTimeout(() => { + this.translate(currentPage, -pageWidth, speed, callback); + this.translate(toPage, 0, speed); + }, 10); + }, next() { this.doAnimate('next'); From f11e39b3fb566df4927da2e9124a702274003b55 Mon Sep 17 00:00:00 2001 From: Hamilton Date: Mon, 7 Aug 2017 12:07:22 +0800 Subject: [PATCH 2/3] [Swipe]Update ReadMe Signed-off-by: Hamilton --- README.MD | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/README.MD b/README.MD index 86489e6..beb8a02 100644 --- a/README.MD +++ b/README.MD @@ -10,18 +10,24 @@ $ npm install vue-swipe # for JavaScript user : install NodeJs first, then install npm plugins for conpile: -## install vue package: https://cn.vuejs.org/v2/guide/installation.html#Bower + install vue package: https://cn.vuejs.org/v2/guide/installation.html#Bower +```bash npm install -g vue npm install --global vue-cli -## install webpack package: https://webpack.github.io/docs/webpack-dev-server.html +``` + install webpack package: https://webpack.github.io/docs/webpack-dev-server.html +```bash npm install -g webpack-dev-server -## compile : +``` + compile : +```bash npm install vue -save-dev npm install vue-loader -save-dev npm install vue-template-compiler -save-dev npm install npm run build // now file dist/vue-swipe.css and dist/vue-swipe.js is available npm run dev // Open http://localhost:8080/example/ in browser +``` # Detail for code usage : ```JavaScript From eae023838e18ab6fe4f844bc8d84bbe9eb0d9c26 Mon Sep 17 00:00:00 2001 From: Hamilton Date: Mon, 7 Aug 2017 15:08:52 +0800 Subject: [PATCH 3/3] [Swipe]add emit index-change Signed-off-by: Hamilton --- dist/vue-swipe.js | 2 +- example/index.html | 2 +- example/index.js | 5 +++++ src/swipe.vue | 4 +++- 4 files changed, 10 insertions(+), 3 deletions(-) diff --git a/dist/vue-swipe.js b/dist/vue-swipe.js index 3a89320..33e6ad8 100644 --- a/dist/vue-swipe.js +++ b/dist/vue-swipe.js @@ -1 +1 @@ -!function(t,e){"object"==typeof exports&&"object"==typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):"object"==typeof exports?exports.VueSwipe=e():t.VueSwipe=e()}(this,function(){return function(t){function e(i){if(n[i])return n[i].exports;var s=n[i]={exports:{},id:i,loaded:!1};return t[i].call(s.exports,s,s.exports,e),s.loaded=!0,s.exports}var n={};return e.m=t,e.c=n,e.p="",e(0)}([function(t,e,n){"use strict";function i(t){return t&&t.__esModule?t:{default:t}}Object.defineProperty(e,"__esModule",{value:!0}),e.SwipeItem=e.Swipe=void 0;var s=n(7),a=i(s),r=n(6),o=i(r);e.Swipe=a.default,e.SwipeItem=o.default},function(t,e){"use strict";Object.defineProperty(e,"__esModule",{value:!0}),e.default={name:"mt-swipe-item",mounted:function(){this.$parent&&this.$parent.swipeItemCreated(this)},destroyed:function(){this.$parent&&this.$parent.swipeItemDestroyed(this)}}},function(t,e,n){"use strict";Object.defineProperty(e,"__esModule",{value:!0});var i=n(4),s=n(3);e.default={name:"mt-swipe",created:function(){this.dragState={}},data:function(){return{ready:!1,dragging:!1,userScrolling:!1,animating:!1,index:0,pages:[],timer:null,reInitTimer:null,noDrag:!1}},props:{speed:{type:Number,default:300},auto:{type:Number,default:3e3},continuous:{type:Boolean,default:!0},showIndicators:{type:Boolean,default:!0},noDragWhenSingle:{type:Boolean,default:!0},prevent:{type:Boolean,default:!1}},methods:{swipeItemCreated:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},swipeItemDestroyed:function(){var t=this;this.ready&&(clearTimeout(this.reInitTimer),this.reInitTimer=setTimeout(function(){t.reInitPages()},100))},translate:function(t,e,n,s){var a=this,r=arguments;if(n){this.animating=!0,t.style.webkitTransition="-webkit-transform "+n+"ms ease-in-out",setTimeout(function(){t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},50);var o=!1,l=function(){o||(o=!0,a.animating=!1,t.style.webkitTransition="",t.style.webkitTransform="",s&&s.apply(a,r))};(0,i.once)(t,"webkitTransitionEnd",l),setTimeout(l,n+100)}else t.style.webkitTransition="",t.style.webkitTransform="translate3d("+e+"px, 0, 0)"},reInitPages:function(){var t=this.$children;this.noDrag=1===t.length&&this.noDragWhenSingle;var e=[];this.index=0,t.forEach(function(t,n){e.push(t.$el),(0,s.removeClass)(t.$el,"is-active"),0===n&&(0,s.addClass)(t.$el,"is-active")}),this.pages=e},doAnimate:function(t,e){var n=this;if(0!==this.$children.length&&(e||!(this.$children.length<2))){var i,a,r,o,l,c=this.speed||300,d=this.index,u=this.pages,h=u.length;e?(i=e.prevPage,r=e.currentPage,a=e.nextPage,o=e.pageWidth,l=e.offsetLeft):(o=this.$el.clientWidth,r=u[d],i=u[d-1],a=u[d+1],this.continuous&&u.length>1&&(i||(i=u[u.length-1]),a||(a=u[0])),i&&(i.style.display="block",this.translate(i,-o)),a&&(a.style.display="block",this.translate(a,o)));var f,p=this.$children[d].$el;"prev"===t?(d>0&&(f=d-1),this.continuous&&0===d&&(f=h-1)):"next"===t&&(d0&&n.translate(i,o*-1,c),a&&l<0&&n.translate(a,o,c)):(i&&n.translate(i,o*-1,c),a&&n.translate(a,o,c)))},10)}},swipeTo:function(t){var e=this;if(0!==this.$children.length&&!(this.$children.length<2)){var n,i,a,r=this.speed||300,o=this.pages,l=(o.length,this.index),c=t>l;if(!(t>=o.length||t<0)){a=this.$el.clientWidth*(c?1:-1),n=o[l],i=o[t];var d=t,u=this.$children[l].$el;i.style.display="block",this.translate(i,a);var h=function(){if(void 0!==d){var t=e.$children[d].$el;(0,s.removeClass)(u,"is-active"),(0,s.addClass)(t,"is-active"),e.index=d}};setTimeout(function(){e.translate(n,-a,r,h),e.translate(i,0,r)},10)}}},next:function(){this.doAnimate("next")},prev:function(){this.doAnimate("prev")},doOnTouchStart:function(t){if(!this.noDrag){var e=this.$el,n=this.dragState,i=t.touches[0];n.startTime=new Date,n.startLeft=i.pageX,n.startTop=i.pageY,n.startTopAbsolute=i.clientY,n.pageWidth=e.offsetWidth,n.pageHeight=e.offsetHeight;var s=this.$children[this.index-1],a=this.$children[this.index],r=this.$children[this.index+1];this.continuous&&this.pages.length>1&&(s||(s=this.$children[this.$children.length-1]),r||(r=this.$children[0])),n.prevPage=s?s.$el:null,n.dragPage=a?a.$el:null,n.nextPage=r?r.$el:null,n.prevPage&&(n.prevPage.style.display="block"),n.nextPage&&(n.nextPage.style.display="block")}},doOnTouchMove:function(t){if(!this.noDrag){var e=this.dragState,n=t.touches[0];e.currentLeft=n.pageX,e.currentTop=n.pageY,e.currentTopAbsolute=n.clientY;var i=e.currentLeft-e.startLeft,s=e.currentTopAbsolute-e.startTopAbsolute,a=Math.abs(i),r=Math.abs(s);if(a<5||a>=5&&r>=1.73*a)return void(this.userScrolling=!0);this.userScrolling=!1,t.preventDefault(),i=Math.min(Math.max(-e.pageWidth+1,i),e.pageWidth-1);var o=i<0?"next":"prev";e.prevPage&&"prev"===o&&this.translate(e.prevPage,i-e.pageWidth),this.translate(e.dragPage,i),e.nextPage&&"next"===o&&this.translate(e.nextPage,i+e.pageWidth)}},doOnTouchEnd:function(){if(!this.noDrag){var t=this.dragState,e=new Date-t.startTime,n=null,i=t.currentLeft-t.startLeft,s=t.currentTop-t.startTop,a=t.pageWidth,r=this.index,o=this.pages.length;if(e<300){var l=Math.abs(i)<5&&Math.abs(s)<5;(isNaN(i)||isNaN(s))&&(l=!0),l&&this.$children[this.index].$emit("tap")}e<300&&void 0===t.currentLeft||((e<300||Math.abs(i)>a/2)&&(n=i<0?"next":"prev"),this.continuous||(0===r&&"prev"===n||r===o-1&&"next"===n)&&(n=null),this.$children.length<2&&(n=null),this.doAnimate(n,{offsetLeft:i,pageWidth:t.pageWidth,prevPage:t.prevPage,currentPage:t.dragPage,nextPage:t.nextPage}),this.dragState={})}}},destroyed:function(){this.timer&&(clearInterval(this.timer),this.timer=null),this.reInitTimer&&(clearTimeout(this.reInitTimer),this.reInitTimer=null)},mounted:function(){var t=this;this.ready=!0,this.auto>0&&(this.timer=setInterval(function(){t.dragging||t.animating||t.next()},this.auto)),this.reInitPages();var e=this.$el;e.addEventListener("touchstart",function(e){t.prevent&&e.preventDefault(),t.animating||(t.dragging=!0,t.userScrolling=!1,t.doOnTouchStart(e))}),e.addEventListener("touchmove",function(e){t.dragging&&t.doOnTouchMove(e)}),e.addEventListener("touchend",function(e){return t.userScrolling?(t.dragging=!1,void(t.dragState={})):void(t.dragging&&(t.doOnTouchEnd(e),t.dragging=!1))})}}},function(t,e){"use strict";var n=function(t){return(t||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},i=function(t,e){if(!t||!e)return!1;if(e.indexOf(" ")!=-1)throw new Error("className should not contain space.");return t.classList?t.classList.contains(e):(" "+t.className+" ").indexOf(" "+e+" ")>-1},s=function(t,e){if(t){for(var n=t.className,s=(e||"").split(" "),a=0,r=s.length;a1&&(n||(n=u[u.length-1]),a||(a=u[0])),n&&(n.style.display="block",this.translate(n,-o)),a&&(a.style.display="block",this.translate(a,o)));var f,p=this.$children[d].$el;"prev"===t?(d>0&&(f=d-1),this.continuous&&0===d&&(f=h-1)):"next"===t&&(d0&&i.translate(n,o*-1,c),a&&l<0&&i.translate(a,o,c)):(n&&i.translate(n,o*-1,c),a&&i.translate(a,o,c)))},10)}},swipeTo:function(t){var e=this;if(0!==this.$children.length&&!(this.$children.length<2)){var i,n,a,r=this.speed||300,o=this.pages,l=this.index,c=t>l;if(!(t>=o.length||t<0)){a=this.$el.clientWidth*(c?1:-1),i=o[l],n=o[t];var d=t,u=this.$children[l].$el;n.style.display="block",this.translate(n,a);var h=function(){if(void 0!==d){var t=e.$children[d].$el;(0,s.removeClass)(u,"is-active"),(0,s.addClass)(t,"is-active"),e.index=d,n.style.display="",e.$emit("index-change")}};setTimeout(function(){e.translate(i,-a,r,h),e.translate(n,0,r)},10)}}},next:function(){this.doAnimate("next")},prev:function(){this.doAnimate("prev")},doOnTouchStart:function(t){if(!this.noDrag){var e=this.$el,i=this.dragState,n=t.touches[0];i.startTime=new Date,i.startLeft=n.pageX,i.startTop=n.pageY,i.startTopAbsolute=n.clientY,i.pageWidth=e.offsetWidth,i.pageHeight=e.offsetHeight;var s=this.$children[this.index-1],a=this.$children[this.index],r=this.$children[this.index+1];this.continuous&&this.pages.length>1&&(s||(s=this.$children[this.$children.length-1]),r||(r=this.$children[0])),i.prevPage=s?s.$el:null,i.dragPage=a?a.$el:null,i.nextPage=r?r.$el:null,i.prevPage&&(i.prevPage.style.display="block"),i.nextPage&&(i.nextPage.style.display="block")}},doOnTouchMove:function(t){if(!this.noDrag){var e=this.dragState,i=t.touches[0];e.currentLeft=i.pageX,e.currentTop=i.pageY,e.currentTopAbsolute=i.clientY;var n=e.currentLeft-e.startLeft,s=e.currentTopAbsolute-e.startTopAbsolute,a=Math.abs(n),r=Math.abs(s);if(a<5||a>=5&&r>=1.73*a)return void(this.userScrolling=!0);this.userScrolling=!1,t.preventDefault(),n=Math.min(Math.max(-e.pageWidth+1,n),e.pageWidth-1);var o=n<0?"next":"prev";e.prevPage&&"prev"===o&&this.translate(e.prevPage,n-e.pageWidth),this.translate(e.dragPage,n),e.nextPage&&"next"===o&&this.translate(e.nextPage,n+e.pageWidth)}},doOnTouchEnd:function(){if(!this.noDrag){var t=this.dragState,e=new Date-t.startTime,i=null,n=t.currentLeft-t.startLeft,s=t.currentTop-t.startTop,a=t.pageWidth,r=this.index,o=this.pages.length;if(e<300){var l=Math.abs(n)<5&&Math.abs(s)<5;(isNaN(n)||isNaN(s))&&(l=!0),l&&this.$children[this.index].$emit("tap")}e<300&&void 0===t.currentLeft||((e<300||Math.abs(n)>a/2)&&(i=n<0?"next":"prev"),this.continuous||(0===r&&"prev"===i||r===o-1&&"next"===i)&&(i=null),this.$children.length<2&&(i=null),this.doAnimate(i,{offsetLeft:n,pageWidth:t.pageWidth,prevPage:t.prevPage,currentPage:t.dragPage,nextPage:t.nextPage}),this.dragState={})}}},destroyed:function(){this.timer&&(clearInterval(this.timer),this.timer=null),this.reInitTimer&&(clearTimeout(this.reInitTimer),this.reInitTimer=null)},mounted:function(){var t=this;this.ready=!0,this.auto>0&&(this.timer=setInterval(function(){t.dragging||t.animating||t.next()},this.auto)),this.reInitPages();var e=this.$el;e.addEventListener("touchstart",function(e){t.prevent&&e.preventDefault(),t.animating||(t.dragging=!0,t.userScrolling=!1,t.doOnTouchStart(e))}),e.addEventListener("touchmove",function(e){t.dragging&&t.doOnTouchMove(e)}),e.addEventListener("touchend",function(e){return t.userScrolling?(t.dragging=!1,void(t.dragState={})):void(t.dragging&&(t.doOnTouchEnd(e),t.dragging=!1))})}}},function(t,e){"use strict";var i=function(t){return(t||"").replace(/^[\s\uFEFF]+|[\s\uFEFF]+$/g,"")},n=function(t,e){if(!t||!e)return!1;if(e.indexOf(" ")!=-1)throw new Error("className should not contain space.");return t.classList?t.classList.contains(e):(" "+t.className+" ").indexOf(" "+e+" ")>-1},s=function(t,e){if(t){for(var i=t.className,s=(e||"").split(" "),a=0,r=s.length;a
- + Slide1 Slide2 Slide3 diff --git a/example/index.js b/example/index.js index 69dba32..a17d392 100644 --- a/example/index.js +++ b/example/index.js @@ -6,5 +6,10 @@ swipeEle = new Vue({ components: { 'swipe': vueSwipe, 'swipe-item': vueSwipeItem + }, + methods: { + indexChange: function () { + alert("indexChange"); + } } }).$children[0]; diff --git a/src/swipe.vue b/src/swipe.vue index 0ceac16..a6e16c3 100644 --- a/src/swipe.vue +++ b/src/swipe.vue @@ -249,6 +249,7 @@ addClass(newPage, 'is-active'); this.index = newIndex; + this.$emit('index-change'); } if (prevPage) { @@ -299,7 +300,6 @@ var currentPage, toPage, pageWidth; var speed = this.speed || 300; var pages = this.pages; - var pageCount = pages.length; var index = this.index; var isNext = toIdx > index; if(toIdx >= pages.length ) return; @@ -322,6 +322,8 @@ addClass(newPage, 'is-active'); this.index = newIndex; + toPage.style.display = ''; + this.$emit('index-change'); } };