vue-slide-for-more
Version:
A vuejs(vue2) component for loading more data when the content was slide to the bottom on mobile, provided refresh function, supported SSR
409 lines (365 loc) • 10.8 kB
JavaScript
/**
* Bundle of vue-slide-for-more
* Generated: 2019-05-24
* Version: 4.2.0
* License: MIT
* Author: livelybone
*/
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
//
var script = {
name: 'SlideForMoreBase',
props: {
slideValue: {
default: 100,
type: Number
},
isSearching: Boolean,
tipHeight: {
type: String,
default: '40px'
}
},
data: function data() {
return {
isBottom: false,
isTop: false,
startPointer: null,
heights: { wrap: 0, wrapOffset: 0, content: 0 },
height: 0,
type: ''
};
},
computed: {
distance: function distance() {
return Math.abs(+this.slideValue);
},
slideType: function slideType() {
return this.isSearching ? this.type : '';
},
cHeight: function cHeight() {
return this.height ? Math.abs(+this.height) + 'px' : this.tipHeight;
},
showUpTip: function showUpTip() {
return this.height < 0 || this.isSearching && this.type === 'slideDown';
},
showBottomTip: function showBottomTip() {
return this.height > 0 || this.isSearching && this.type === 'slideUp';
},
tipWrap: function tipWrap() {
if (!this.showUpTip) return { opacity: 0 };
return {
height: this.cHeight,
opacity: 1,
bottom: this.bottom + 'px'
};
},
bottom: function bottom() {
var _heights = this.heights,
wrap = _heights.wrap,
content = _heights.content;
return Math.min(0, wrap - content);
},
bottomTipWrap: function bottomTipWrap() {
if (!this.showBottomTip) return { opacity: 0 };
return {
height: this.cHeight,
opacity: 1,
bottom: this.bottom + 'px'
};
},
contentStyle: function contentStyle() {
if (this.height) {
return { bottom: '' + (this.height < 0 ? '-' : '') + this.cHeight };
}
return { bottom: this.isSearching ? '' + (this.type === 'slideDown' ? '-' : '') + this.cHeight : '0px' };
},
transition: function transition() {
return !this.height ? 'transition' : '';
}
},
methods: {
start: function start(ev) {
var _heights2 = this.heights,
wrap = _heights2.wrap,
content = _heights2.content;
var scrollTop = this.getScrollTop();
this.isTop = scrollTop <= 0;
this.isBottom = scrollTop >= content - wrap;
this.startPointer = { pageY: ev.changedTouches[0].pageY };
},
move: function move(ev) {
if (!this.isBottom && !this.isTop || this.isSearching) return;
var height = this.startPointer.pageY - ev.changedTouches[0].pageY;
if (height > 0 && this.isBottom || height < 0 && this.isTop) {
this.height = height;
ev.preventDefault();
}
},
end: function end(ev) {
if (!this.isBottom && !this.isTop) return;
var distance = this.startPointer.pageY - ev.changedTouches[0].pageY;
if (this.distance <= distance && this.isBottom) {
this.$emit(this.type = 'slideUp');
this.$emit('loadMore');
} else if (this.distance <= -distance && this.isTop) {
this.$emit(this.type = 'slideDown');
this.$emit('refresh');
}
this.height = 0;
},
getHeights: function getHeights() {
var _this = this;
this.$nextTick(function () {
var _$refs = _this.$refs,
wrap = _$refs.wrap,
content = _$refs.content;
if (content) {
_this.heights.content = content.offsetHeight;
_this.heights.wrap = wrap.clientHeight;
_this.validPaddingTopBottom();
}
});
},
getScrollTop: function getScrollTop() {
if (!this.$refs.wrap) return 0;
return this.$refs.wrap.scrollTop;
},
validPaddingTopBottom: function validPaddingTopBottom() {
var wrap = this.$refs.wrap;
var _window$getComputedSt = window.getComputedStyle(wrap),
paddingTop = _window$getComputedSt.paddingTop,
paddingBottom = _window$getComputedSt.paddingBottom;
if (parseInt(paddingTop, 10) || parseInt(paddingBottom, 10)) {
console.warn('SlideForMore: The wrap element should not have paddingTop and paddingBottom. You can set padding to content element instead');
}
}
},
mounted: function mounted() {
this.getHeights();
},
updated: function updated() {
this.getHeights();
}
};
function normalizeComponent(template, style, script, scopeId, isFunctionalTemplate, moduleIdentifier
/* server only */
, shadowMode, createInjector, createInjectorSSR, createInjectorShadow) {
if (typeof shadowMode !== 'boolean') {
createInjectorSSR = createInjector;
createInjector = shadowMode;
shadowMode = false;
} // Vue.extend constructor export interop.
var options = typeof script === 'function' ? script.options : script; // render functions
if (template && template.render) {
options.render = template.render;
options.staticRenderFns = template.staticRenderFns;
options._compiled = true; // functional template
if (isFunctionalTemplate) {
options.functional = true;
}
} // scopedId
if (scopeId) {
options._scopeId = scopeId;
}
var hook;
if (moduleIdentifier) {
// server build
hook = function hook(context) {
// 2.3 injection
context = context || // cached call
this.$vnode && this.$vnode.ssrContext || // stateful
this.parent && this.parent.$vnode && this.parent.$vnode.ssrContext; // functional
// 2.2 with runInNewContext: true
if (!context && typeof __VUE_SSR_CONTEXT__ !== 'undefined') {
context = __VUE_SSR_CONTEXT__;
} // inject component styles
if (style) {
style.call(this, createInjectorSSR(context));
} // register component module identifier for async chunk inference
if (context && context._registeredComponents) {
context._registeredComponents.add(moduleIdentifier);
}
}; // used by ssr in case component is cached and beforeCreate
// never gets called
options._ssrRegister = hook;
} else if (style) {
hook = shadowMode ? function () {
style.call(this, createInjectorShadow(this.$root.$options.shadowRoot));
} : function (context) {
style.call(this, createInjector(context));
};
}
if (hook) {
if (options.functional) {
// register for functional component in vue file
var originalRender = options.render;
options.render = function renderWithStyleInjection(h, context) {
hook.call(context);
return originalRender(h, context);
};
} else {
// inject component registration as beforeCreate hook
var existing = options.beforeCreate;
options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
}
}
return script;
}
var normalizeComponent_1 = normalizeComponent;
/* script */
var __vue_script__ = script;
/* template */
var __vue_render__ = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("div", {
ref: "wrap",
staticClass: "slide-for-more-base-wrap",
staticStyle: { padding: "0" },
on: { touchstart: _vm.start, touchend: _vm.end, touchmove: _vm.move }
}, [_c("div", {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showUpTip,
expression: "showUpTip"
}],
staticClass: "slide-for-more-top-tip-wrap",
class: _vm.transition,
style: _vm.tipWrap
}, [_vm._t("topTip")], 2), _vm._v(" "), _c("div", {
ref: "content",
staticClass: "slide-for-more-content",
class: _vm.transition,
style: _vm.contentStyle
}, [_vm._t("default")], 2), _vm._v(" "), _c("div", {
directives: [{
name: "show",
rawName: "v-show",
value: _vm.showBottomTip,
expression: "showBottomTip"
}],
staticClass: "slide-for-more-tip-wrap",
class: _vm.transition,
style: _vm.bottomTipWrap
}, [_vm._t("tip")], 2)]);
};
var __vue_staticRenderFns__ = [];
__vue_render__._withStripped = true;
/* style */
var __vue_inject_styles__ = undefined;
/* scoped */
var __vue_scope_id__ = undefined;
/* module identifier */
var __vue_module_identifier__ = undefined;
/* functional template */
var __vue_is_functional_template__ = false;
/* style inject */
/* style inject SSR */
var SlideForMoreBase = normalizeComponent_1({ render: __vue_render__, staticRenderFns: __vue_staticRenderFns__ }, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, undefined, undefined);
//
var script$1 = {
name: 'SlideForMore',
props: {
slideValue: {
default: 100,
type: Number
},
isSearching: Boolean,
tipHeight: {
type: String,
default: '40px'
}
},
data: function data() {
return {};
},
components: { SlideForMoreBase: SlideForMoreBase }
};
/* script */
var __vue_script__$1 = script$1;
/* template */
var __vue_render__$1 = function __vue_render__() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c("slide-for-more-base", {
attrs: {
slideValue: _vm.slideValue,
isSearching: _vm.isSearching,
tipHeight: _vm.tipHeight
},
on: {
refresh: function refresh($event) {
_vm.$emit("refresh");
},
slideUp: function slideUp($event) {
_vm.$emit("slideUp");
},
loadMore: function loadMore($event) {
_vm.$emit("loadMore");
},
slideDown: function slideDown($event) {
_vm.$emit("slideDown");
}
}
}, [_c("div", {
staticClass: "slide-for-more-top-tip",
attrs: { slot: "topTip" },
slot: "topTip"
}, [_vm.isSearching ? [_vm._v("\n 正在刷新...\n ")] : [_vm._v("刷新")]], 2), _vm._v(" "), _vm._t("default"), _vm._v(" "), _c("div", {
staticClass: "slide-for-more-tip",
attrs: { slot: "tip" },
slot: "tip"
}, [_vm.isSearching ? [_vm._v("\n 正在获取...\n ")] : [_vm._v("获取更多")]], 2)], 2);
};
var __vue_staticRenderFns__$1 = [];
__vue_render__$1._withStripped = true;
/* style */
var __vue_inject_styles__$1 = undefined;
/* scoped */
var __vue_scope_id__$1 = undefined;
/* module identifier */
var __vue_module_identifier__$1 = undefined;
/* functional template */
var __vue_is_functional_template__$1 = false;
/* style inject */
/* style inject SSR */
var SlideForMore = normalizeComponent_1({ render: __vue_render__$1, staticRenderFns: __vue_staticRenderFns__$1 }, __vue_inject_styles__$1, __vue_script__$1, __vue_scope_id__$1, __vue_is_functional_template__$1, __vue_module_identifier__$1, undefined, undefined);
export { SlideForMore, SlideForMoreBase };