diff --git a/README.md b/README.md index ace6bc2..c579aae 100644 --- a/README.md +++ b/README.md @@ -70,7 +70,7 @@ new Vue({ | Property | Description | |:--|:--| | onRefresh | refresh event;Should return a promise. | -| config | {
errorLabel: label shows when error
startLabel: label shows when pull down start
readyLabel: label shows when ready to refresh
loadingLabel: label shows when loading
pullDownHeight: the height toggle pull down refresh action
} | +| config | {
errorLabel: label shows when error
startLabel: label shows when pull down start
readyLabel: label shows when ready to refresh
loadingLabel: label shows when loading
pullDownHeight: the height toggle pull down refresh action
containerSelector: selector of the container where the element is used, useful for pages where the list is embedded somewhere and the top of the list does not match the top of the screen
} | ## Contribution First, install dependencies diff --git a/dist/vue-pull-refresh.min.js b/dist/vue-pull-refresh.min.js index b6e92fc..1186f65 100644 --- a/dist/vue-pull-refresh.min.js +++ b/dist/vue-pull-refresh.min.js @@ -1 +1 @@ -!function(n,t){"object"==typeof exports&&"object"==typeof module?module.exports=t():"function"==typeof define&&define.amd?define([],t):"object"==typeof exports?exports.VuePullRefresh=t():n.VuePullRefresh=t()}(this,function(){return function(n){function t(o){if(e[o])return e[o].exports;var r=e[o]={i:o,l:!1,exports:{}};return n[o].call(r.exports,r,r.exports,t),r.l=!0,r.exports}var e={};return t.m=n,t.c=e,t.i=function(n){return n},t.d=function(n,e,o){t.o(n,e)||Object.defineProperty(n,e,{configurable:!1,enumerable:!0,get:o})},t.n=function(n){var e=n&&n.__esModule?function(){return n.default}:function(){return n};return t.d(e,"a",e),e},t.o=function(n,t){return Object.prototype.hasOwnProperty.call(n,t)},t.p="",t(t.s=2)}([function(n,t,e){var o,r;e(10),o=e(1);var i=e(8);r=o=o||{},"object"!=typeof o.default&&"function"!=typeof o.default||(Object.keys(o).some(function(n){return"default"!==n&&"__esModule"!==n})&&console.error("named exports are not supported in *.vue files."),r=o=o.default),"function"==typeof r&&(r=r.options),r.__file="/Users/linbin/Desktop/workspace/vue-pull-refresh/src/vue-pull-refresh.vue",r.render=i.render,r.staticRenderFns=i.staticRenderFns,r.functional&&console.error("[vue-loader] vue-pull-refresh.vue: functional components are not supported and should be defined in plain js files using render functions."),n.exports=o},function(n,t,e){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var o=["数据异常","下拉刷新数据","松开刷新数据","数据刷新中..."];t.default={props:{onRefresh:{type:Function},config:{type:Object,default:function(){return{}}}},data:function(){return{pullDown:{status:0,height:0,msg:""},canPull:!1}},computed:{label:function(){return-1===this.pullDown.status?this.pullDown.msg:this.customLabels[this.pullDown.status+1]},customLabels:function(){return[void 0!==this.config.errorLabel?this.config.errorLabel:o[0],void 0!==this.config.startLabel?this.config.startLabel:o[1],void 0!==this.config.readyLabel?this.config.readyLabel:o[2],void 0!==this.config.loadingLabel?this.config.loadingLabel:o[3]]},iconClass:function(){return 2===this.pullDown.status?"pull-down-refresh":-1===this.pullDown.status?"pull-down-error":""},pullDownContentStyle:function(){return{bottom:(this.config.pullDownHeight-40)/2+"px"}}},mounted:function(){var n=this;this.$nextTick(function(){var t=n.$el,e=t.querySelector(".pull-down-header"),o=e.querySelector(".pull-down-content--icon");n.config.pullDownHeight=n.config.pullDownHeight||60;var r=function(n,t){t&&(e.style.transition="height .2s ease"),n.height=0,n.status=0},i={start:0,distance:0},s=!1;try{var l=Object.defineProperty({},"passive",{get:function(){s=!0}});window.addEventListener("test",null,l)}catch(n){}t.addEventListener("touchstart",function(e){0===t.scrollTop?n.canPull=!0:n.canPull=!1,i.start=e.touches.item(0).pageY},!!s&&{passive:!0}),t.addEventListener("touchmove",function(e){if(n.canPull){var r=e.touches.item(0).pageY-i.start;r=r>180?180:r,r>0&&(t.style.overflow="hidden"),i.distance=r,n.pullDown.height=r,r>n.config.pullDownHeight?(n.pullDown.status=1,o.style.transform="rotate(180deg)"):(n.pullDown.status=0,o.style.transform="rotate("+r/n.config.pullDownHeight*180+"deg)")}},!!s&&{passive:!0}),t.addEventListener("touchend",function(s){if(n.canPull=!1,t.style.overflowY="auto",e.style.transition="height .2s ease",o.style.transform="",i.distance-t.scrollTop>n.config.pullDownHeight)if(t.scrollTop=0,n.pullDown.height=n.config.pullDownHeight,n.pullDown.status=2,n.onRefresh&&"function"==typeof n.onRefresh){var l=n.onRefresh();l&&l.then&&"function"==typeof l.then?l.then(function(t){r(n.pullDown,!0)},function(t){"string"!=typeof t&&(t=!1),n.pullDown.msg=t||n.customLabels[0],n.pullDown.status=-1,setTimeout(function(){r(n.pullDown,!0)},1e3)}):r(n.pullDown)}else r(n.pullDown),console.warn("please use :on-refresh to pass onRefresh callback");else r(n.pullDown);i.distance=0,i.start=0}),e.addEventListener("transitionend",function(){e.style.transition=""}),e.addEventListener("webkitTransitionEnd",function(){e.style.transition=""})})}}},function(n,t,e){"use strict";var o=e(0),r=function(n){return n&&n.__esModule?n:{default:n}}(o);n.exports=r.default},function(n,t,e){t=n.exports=e(4)(),t.push([n.i,'\n.pull-down-container {\n height: 100%;\n max-height: 100%;\n overflow-y: auto;\n}\n.pull-down-header {\n width: 100%;\n height: 0px;\n overflow: hidden;\n position: relative;\n background-color: #2c3133;\n}\n.pull-down-content {\n position: absolute;\n max-width: 90%;\n bottom: 10px;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n height: 40px;\n color: #d5d5d5;\n text-align: center;\n border-left: 20px solid transparent;\n font-family: "noto-thin", "Helvetica Neue", Helvetica, Arial, sans-serif;\n font-size: 14px;\n}\n.pull-down-content--icon {\n float: left;\n height: 20px;\n width: 20px;\n margin-top: 10px;\n margin-left: -20px;\n background: url('+e(5)+") no-repeat center center;\n background-size: 20px 20px;\n}\n.pull-down-content--icon.pull-down-refresh {\n background: url("+e(7)+") no-repeat center center;\n background-size: 20px 20px;\n -webkit-animation: rotate 2s infinite;\n animation: rotate 2s infinite;\n -webkit-animation-timing-function: linear;\n animation-timing-function: linear;\n}\n.pull-down-content--icon.pull-down-error {\n background: url("+e(6)+") no-repeat center center;\n background-size: 20px 20px;\n}\n.pull-down-content--label {\n float: left;\n height: 20px;\n line-height: 20px;\n margin-left: 10px;\n margin-top: 10px;\n}\n@-webkit-keyframes rotate {\nfrom {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\nto {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n}\n}\n@keyframes rotate {\nfrom {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\nto {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n}\n}\n",""])},function(n,t){n.exports=function(){var n=[];return n.toString=function(){for(var n=[],t=0;t=0&&h.splice(t,1)}function s(n){var t=document.createElement("style");return t.type="text/css",r(n,t),t}function l(n,t){var e,o,r;if(t.singleton){var l=g++;e=p||(p=s(t)),o=A.bind(null,e,l,!1),r=A.bind(null,e,l,!0)}else e=s(t),o=a.bind(null,e),r=function(){i(e)};return o(n),function(t){if(t){if(t.css===n.css&&t.media===n.media&&t.sourceMap===n.sourceMap)return;o(n=t)}else r()}}function A(n,t,e,o){var r=e?"":o.css;if(n.styleSheet)n.styleSheet.cssText=m(t,r);else{var i=document.createTextNode(r),s=n.childNodes;s[t]&&n.removeChild(s[t]),s.length?n.insertBefore(i,s[t]):n.appendChild(i)}}function a(n,t){var e=t.css,o=t.media,r=t.sourceMap;if(o&&n.setAttribute("media",o),r&&(e+="\n/*# sourceURL="+r.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),n.styleSheet)n.styleSheet.cssText=e;else{for(;n.firstChild;)n.removeChild(n.firstChild);n.appendChild(document.createTextNode(e))}}var u={},c=function(n){var t;return function(){return void 0===t&&(t=n.apply(this,arguments)),t}},f=c(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),d=c(function(){return document.head||document.getElementsByTagName("head")[0]}),p=null,g=0,h=[];n.exports=function(n,t){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");t=t||{},void 0===t.singleton&&(t.singleton=f()),void 0===t.insertAt&&(t.insertAt="bottom");var r=o(n);return e(r,t),function(n){for(var i=[],s=0;s180?180:o,o>0&&(n.style.overflow="hidden"),l.distance=o,t.pullDown.height=o,o>t.config.pullDownHeight?(t.pullDown.status=1,r.style.transform="rotate(180deg)"):(t.pullDown.status=0,r.style.transform="rotate("+o/t.config.pullDownHeight*180+"deg)")}},!!s&&{passive:!0}),n.addEventListener("touchend",function(e){if(t.canPull=!1,n.style.overflowY="auto",o.style.transition="height .2s ease",r.style.transform="",l.distance-n.scrollTop>t.config.pullDownHeight)if(n.scrollTop=0,t.pullDown.height=t.config.pullDownHeight,t.pullDown.status=2,t.onRefresh&&"function"==typeof t.onRefresh){var s=t.onRefresh();s&&s.then&&"function"==typeof s.then?s.then(function(n){i(t.pullDown,!0)},function(n){"string"!=typeof n&&(n=!1),t.pullDown.msg=n||t.customLabels[0],t.pullDown.status=-1,setTimeout(function(){i(t.pullDown,!0)},1e3)}):i(t.pullDown)}else i(t.pullDown),console.warn("please use :on-refresh to pass onRefresh callback");else i(t.pullDown);l.distance=0,l.start=0}),o.addEventListener("transitionend",function(){o.style.transition=""}),o.addEventListener("webkitTransitionEnd",function(){o.style.transition=""})})}}},function(t,n,e){"use strict";var o=e(0),r=function(t){return t&&t.__esModule?t:{default:t}}(o);t.exports=r.default},function(t,n,e){n=t.exports=e(4)(),n.push([t.i,'\n.pull-down-container {\n height: 100%;\n max-height: 100%;\n overflow-y: auto;\n}\n.pull-down-header {\n width: 100%;\n height: 0px;\n overflow: hidden;\n position: relative;\n background-color: #2c3133;\n}\n.pull-down-content {\n position: absolute;\n max-width: 90%;\n bottom: 10px;\n left: 50%;\n -webkit-transform: translateX(-50%);\n transform: translateX(-50%);\n height: 40px;\n color: #d5d5d5;\n text-align: center;\n border-left: 20px solid transparent;\n font-family: "noto-thin", "Helvetica Neue", Helvetica, Arial, sans-serif;\n font-size: 14px;\n}\n.pull-down-content--icon {\n float: left;\n height: 20px;\n width: 20px;\n margin-top: 10px;\n margin-left: -20px;\n background: url('+e(5)+") no-repeat center center;\n background-size: 20px 20px;\n}\n.pull-down-content--icon.pull-down-refresh {\n background: url("+e(7)+") no-repeat center center;\n background-size: 20px 20px;\n -webkit-animation: rotate 2s infinite;\n animation: rotate 2s infinite;\n -webkit-animation-timing-function: linear;\n animation-timing-function: linear;\n}\n.pull-down-content--icon.pull-down-error {\n background: url("+e(6)+") no-repeat center center;\n background-size: 20px 20px;\n}\n.pull-down-content--label {\n float: left;\n height: 20px;\n line-height: 20px;\n margin-left: 10px;\n margin-top: 10px;\n}\n@-webkit-keyframes rotate {\nfrom {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\nto {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n}\n}\n@keyframes rotate {\nfrom {\n -webkit-transform: rotate(0deg);\n transform: rotate(0deg);\n}\nto {\n -webkit-transform: rotate(360deg);\n transform: rotate(360deg);\n}\n}\n",""])},function(t,n){t.exports=function(){var t=[];return t.toString=function(){for(var t=[],n=0;n=0&&h.splice(n,1)}function l(t){var n=document.createElement("style");return n.type="text/css",r(t,n),n}function s(t,n){var e,o,r;if(n.singleton){var s=g++;e=p||(p=l(n)),o=A.bind(null,e,s,!1),r=A.bind(null,e,s,!0)}else e=l(n),o=a.bind(null,e),r=function(){i(e)};return o(t),function(n){if(n){if(n.css===t.css&&n.media===t.media&&n.sourceMap===t.sourceMap)return;o(t=n)}else r()}}function A(t,n,e,o){var r=e?"":o.css;if(t.styleSheet)t.styleSheet.cssText=m(n,r);else{var i=document.createTextNode(r),l=t.childNodes;l[n]&&t.removeChild(l[n]),l.length?t.insertBefore(i,l[n]):t.appendChild(i)}}function a(t,n){var e=n.css,o=n.media,r=n.sourceMap;if(o&&t.setAttribute("media",o),r&&(e+="\n/*# sourceURL="+r.sources[0]+" */",e+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(r))))+" */"),t.styleSheet)t.styleSheet.cssText=e;else{for(;t.firstChild;)t.removeChild(t.firstChild);t.appendChild(document.createTextNode(e))}}var u={},c=function(t){var n;return function(){return void 0===n&&(n=t.apply(this,arguments)),n}},d=c(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),f=c(function(){return document.head||document.getElementsByTagName("head")[0]}),p=null,g=0,h=[];t.exports=function(t,n){if("undefined"!=typeof DEBUG&&DEBUG&&"object"!=typeof document)throw new Error("The style-loader cannot be used in a non-browser environment");n=n||{},void 0===n.singleton&&(n.singleton=d()),void 0===n.insertAt&&(n.insertAt="bottom");var r=o(t);return e(r,n),function(t){for(var i=[],l=0;l
-
-
- - {{label}} + +
+
+ + {{label}} +
-
+
@@ -43,6 +45,13 @@ }; }, computed: { + slotProps() { + return { + label: this.label, + headerStyle: this.pullDownHeaderStyle, + contentStyle: this.pullDownContentStyle + }; + }, label() { // label of pull down if (this.pullDown.status === STATUS_ERROR) { @@ -66,15 +75,23 @@ } return ''; }, + pullDownHeaderStyle() { + return { + height: `${this.pullDown.height}px` + }; + }, pullDownContentStyle() { + const height = (this.config.pullDownHeight - 40) / 2; + return { - bottom: (this.config.pullDownHeight - 40) / 2 + 'px' + bottom: `${height}px` }; } }, mounted() { this.$nextTick(() => { var el = this.$el; + var container = document.querySelector(this.config.containerSelector) || el; var pullDownHeader = el.querySelector('.pull-down-header'); var icon = pullDownHeader.querySelector('.pull-down-content--icon'); // set default pullDownHeight @@ -112,7 +129,7 @@ // bind touchstart event to store start position of touch el.addEventListener('touchstart', e => { - if (el.scrollTop === 0) { + if (container.scrollTop === 0) { this.canPull = true; } else { this.canPull = false;