Skip to content

Commit

Permalink
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(master): toThresholdTop and bottomThreshold
Browse files Browse the repository at this point in the history
feat(master): toThresholdTop and bottomThreshold

feat(master): toThresholdTop and bottomThreshold

feat(master): toThresholdTop and bottomThreshold
masongzhi committed Jul 14, 2023
1 parent a4123b7 commit 897983b
Showing 3 changed files with 208 additions and 161 deletions.
16 changes: 14 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
@@ -186,12 +186,24 @@ More usages or getting start you can refer to these clearly [examples](https://g
<td></td>
<td>Emited when scrolled to top or left, no param.</td>
</tr>
<tr>
<td><code>toThresholdTop</code></td>
<td>Event</td>
<td></td>
<td>Emited when scrolled to top or left with topThreshold, no param.</td>
</tr>
<tr>
<td><code>tobottom</code></td>
<td>Event</td>
<td></td>
<td>Emited when scrolled to bottom or right, no param.</td>
</tr>
<tr>
<td><code>toThresholdBottom</code></td>
<td>Event</td>
<td></td>
<td>Emited when scrolled to bottom or right with bottomThreshold, no param.</td>
</tr>
<tr>
<td><code>resized</code></td>
<td>Event</td>
@@ -214,13 +226,13 @@ More usages or getting start you can refer to these clearly [examples](https://g
<td><code>top-threshold</code></td>
<td>Number</td>
<td>0</td>
<td>The threshold to emit <code>totop</code> event, attention to multiple calls.</td>
<td>The threshold to emit <code>toThresholdTop</code> event, attention to multiple calls.</td>
</tr>
<tr>
<td><code>bottom-threshold</code></td>
<td>Number</td>
<td>0</td>
<td>The threshold to emit <code>tobottom</code> event, attention to multiple calls.</td>
<td>The threshold to emit <code>toThresholdBottom</code> event, attention to multiple calls.</td>
</tr>
<tr>
<td><code>root-tag</code></td>
345 changes: 188 additions & 157 deletions dist/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/*!
* vue-virtual-scroll-list v2.3.4
* vue-virtual-scroll-list v2.3.6
* open source under the MIT license
* https://github.com/tangbc/vue-virtual-scroll-list#readme
*/
@@ -12,32 +12,12 @@

Vue = Vue && Object.prototype.hasOwnProperty.call(Vue, 'default') ? Vue['default'] : Vue;

function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);
if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
enumerableOnly && (symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
})), keys.push.apply(keys, symbols);
}
return keys;
}
function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = null != arguments[i] ? arguments[i] : {};
i % 2 ? ownKeys(Object(source), !0).forEach(function (key) {
_defineProperty(target, key, source[key]);
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
return target;
}
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}

function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
@@ -47,14 +27,13 @@
Object.defineProperty(target, descriptor.key, descriptor);
}
}

function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
Object.defineProperty(Constructor, "prototype", {
writable: false
});
return Constructor;
}

function _defineProperty(obj, key, value) {
if (key in obj) {
Object.defineProperty(obj, key, {
@@ -66,90 +45,131 @@
} else {
obj[key] = value;
}

return obj;
}

function ownKeys(object, enumerableOnly) {
var keys = Object.keys(object);

if (Object.getOwnPropertySymbols) {
var symbols = Object.getOwnPropertySymbols(object);
if (enumerableOnly) symbols = symbols.filter(function (sym) {
return Object.getOwnPropertyDescriptor(object, sym).enumerable;
});
keys.push.apply(keys, symbols);
}

return keys;
}

function _objectSpread2(target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i] != null ? arguments[i] : {};

if (i % 2) {
ownKeys(Object(source), true).forEach(function (key) {
_defineProperty(target, key, source[key]);
});
} else if (Object.getOwnPropertyDescriptors) {
Object.defineProperties(target, Object.getOwnPropertyDescriptors(source));
} else {
ownKeys(Object(source)).forEach(function (key) {
Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key));
});
}
}

return target;
}

function _toConsumableArray(arr) {
return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
if (Array.isArray(arr)) return _arrayLikeToArray(arr);
}

function _iterableToArray(iter) {
if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter);
if (typeof Symbol !== "undefined" && Symbol.iterator in Object(iter)) return Array.from(iter);
}

function _unsupportedIterableToArray(o, minLen) {
if (!o) return;
if (typeof o === "string") return _arrayLikeToArray(o, minLen);
var n = Object.prototype.toString.call(o).slice(8, -1);
if (n === "Object" && o.constructor) n = o.constructor.name;
if (n === "Map" || n === "Set") return Array.from(o);
if (n === "Map" || n === "Set") return Array.from(n);
if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
}

function _arrayLikeToArray(arr, len) {
if (len == null || len > arr.length) len = arr.length;

for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];

return arr2;
}

function _nonIterableSpread() {
throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
}

/**
* virtual list core calculating center
*/

var DIRECTION_TYPE = {
FRONT: 'FRONT',
// scroll up or left
BEHIND: 'BEHIND' // scroll down or right
};

};
var CALC_TYPE = {
INIT: 'INIT',
FIXED: 'FIXED',
DYNAMIC: 'DYNAMIC'
};
var LEADING_BUFFER = 0;

var Virtual = /*#__PURE__*/function () {
function Virtual(param, callUpdate) {
_classCallCheck(this, Virtual);

this.init(param, callUpdate);
}

_createClass(Virtual, [{
key: "init",
value: function init(param, callUpdate) {
// param data
this.param = param;
this.callUpdate = callUpdate;
this.callUpdate = callUpdate; // size data

// size data
this.sizes = new Map();
this.firstRangeTotalSize = 0;
this.firstRangeAverageSize = 0;
this.fixedSizeValue = 0;
this.calcType = CALC_TYPE.INIT;
this.calcType = CALC_TYPE.INIT; // scroll data

// scroll data
this.offset = 0;
this.direction = '';
this.direction = ''; // range data

// range data
this.range = Object.create(null);

if (param) {
this.checkRange(0, param.keeps - 1);
}

// benchmark test data
} // benchmark test data
// this.__bsearchCalls = 0
// this.__getIndexOffsetCalls = 0

}
}, {
key: "destroy",
value: function destroy() {
this.init(null, null);
}
} // return current render range

// return current render range
}, {
key: "getRange",
value: function getRange() {
@@ -169,9 +189,8 @@
key: "isFront",
value: function isFront() {
return this.direction === DIRECTION_TYPE.FRONT;
}
} // return start index offset

// return start index offset
}, {
key: "getOffset",
value: function getOffset(start) {
@@ -181,6 +200,7 @@
key: "updateParam",
value: function updateParam(key, value) {
var _this = this;

if (this.param && key in this.param) {
// if uniqueIds change, find out deleted id and remove from size map
if (key === 'uniqueIds') {
@@ -190,29 +210,28 @@
}
});
}

this.param[key] = value;
}
}
} // save each size map by id

// save each size map by id
}, {
key: "saveSize",
value: function saveSize(id, size) {
this.sizes.set(id, size);

// we assume size type is fixed at the beginning and remember first size value
this.sizes.set(id, size); // we assume size type is fixed at the beginning and remember first size value
// if there is no size value different from this at next comming saving
// we think it's a fixed size list, otherwise is dynamic size list

if (this.calcType === CALC_TYPE.INIT) {
this.fixedSizeValue = size;
this.calcType = CALC_TYPE.FIXED;
} else if (this.calcType === CALC_TYPE.FIXED && this.fixedSizeValue !== size) {
this.calcType = CALC_TYPE.DYNAMIC;
// it's no use at all
this.calcType = CALC_TYPE.DYNAMIC; // it's no use at all

delete this.fixedSizeValue;
}
} // calculate the average size only in the first range


// calculate the average size only in the first range
if (this.calcType !== CALC_TYPE.FIXED && typeof this.firstRangeTotalSize !== 'undefined') {
if (this.sizes.size < Math.min(this.param.keeps, this.param.uniqueIds.length)) {
this.firstRangeTotalSize = _toConsumableArray(this.sizes.values()).reduce(function (acc, val) {
@@ -224,93 +243,97 @@
delete this.firstRangeTotalSize;
}
}
}

// in some special situation (e.g. length change) we need to update in a row
} // in some special situation (e.g. length change) we need to update in a row
// try goiong to render next range by a leading buffer according to current direction

}, {
key: "handleDataSourcesChange",
value: function handleDataSourcesChange() {
var start = this.range.start;

if (this.isFront()) {
start = start - LEADING_BUFFER;
} else if (this.isBehind()) {
start = start + LEADING_BUFFER;
}

start = Math.max(start, 0);
this.updateRange(this.range.start, this.getEndByStart(start));
}
} // when slot size change, we also need force update

// when slot size change, we also need force update
}, {
key: "handleSlotSizeChange",
value: function handleSlotSizeChange() {
this.handleDataSourcesChange();
}
} // calculating range on scroll

// calculating range on scroll
}, {
key: "handleScroll",
value: function handleScroll(offset) {
this.direction = offset < this.offset || offset === 0 ? DIRECTION_TYPE.FRONT : DIRECTION_TYPE.BEHIND;
this.offset = offset;

if (!this.param) {
return;
}

if (this.direction === DIRECTION_TYPE.FRONT) {
this.handleFront();
} else if (this.direction === DIRECTION_TYPE.BEHIND) {
this.handleBehind();
}
}
} // ----------- public method end -----------

// ----------- public method end -----------
}, {
key: "handleFront",
value: function handleFront() {
var overs = this.getScrollOvers();
// should not change range if start doesn't exceed overs
var overs = this.getScrollOvers(); // should not change range if start doesn't exceed overs

if (overs > this.range.start) {
return;
}
} // move up start by a buffer length, and make sure its safety


// move up start by a buffer length, and make sure its safety
var start = Math.max(overs - this.param.buffer, 0);
this.checkRange(start, this.getEndByStart(start));
}
}, {
key: "handleBehind",
value: function handleBehind() {
var overs = this.getScrollOvers();
// range should not change if scroll overs within buffer
var overs = this.getScrollOvers(); // range should not change if scroll overs within buffer

if (overs < this.range.start + this.param.buffer) {
return;
}

this.checkRange(overs, this.getEndByStart(overs));
}
} // return the pass overs according to current scroll offset

// return the pass overs according to current scroll offset
}, {
key: "getScrollOvers",
value: function getScrollOvers() {
// if slot header exist, we need subtract its size
var offset = this.offset - this.param.slotHeaderSize;

if (offset <= 0) {
return 0;
}
} // if is fixed type, that can be easily


// if is fixed type, that can be easily
if (this.isFixedType()) {
return Math.floor(offset / this.fixedSizeValue);
}

var low = 0;
var middle = 0;
var middleOffset = 0;
var high = this.param.uniqueIds.length;

while (low <= high) {
// this.__bsearchCalls++
middle = low + Math.floor((high - low) / 2);
middleOffset = this.getIndexOffset(middle);

if (middleOffset === offset) {
return middle;
} else if (middleOffset < offset) {
@@ -319,63 +342,62 @@
high = middle - 1;
}
}
return low > 0 ? --low : 0;
}

// return a scroll offset from given index, can efficiency be improved more here?
return low > 0 ? --low : 0;
} // return a scroll offset from given index, can efficiency be improved more here?
// although the call frequency is very high, its only a superposition of numbers

}, {
key: "getIndexOffset",
value: function getIndexOffset(givenIndex) {
if (!givenIndex) {
return 0;
}

var offset = 0;
var indexSize = 0;

for (var index = 0; index < givenIndex; index++) {
// this.__getIndexOffsetCalls++
indexSize = this.sizes.get(this.param.uniqueIds[index]);
offset = offset + (typeof indexSize === 'number' ? indexSize : this.getEstimateSize());
}

return offset;
}
} // is fixed size type

// is fixed size type
}, {
key: "isFixedType",
value: function isFixedType() {
return this.calcType === CALC_TYPE.FIXED;
}
} // return the real last index

// return the real last index
}, {
key: "getLastIndex",
value: function getLastIndex() {
return this.param.uniqueIds.length - 1;
}

// in some conditions range is broke, we need correct it
} // in some conditions range is broke, we need correct it
// and then decide whether need update to next range

}, {
key: "checkRange",
value: function checkRange(start, end) {
var keeps = this.param.keeps;
var total = this.param.uniqueIds.length;
var total = this.param.uniqueIds.length; // datas less than keeps, render all

// datas less than keeps, render all
if (total <= keeps) {
start = 0;
end = this.getLastIndex();
} else if (end - start < keeps - 1) {
// if range length is less than keeps, corrent it base on end
start = end - keeps + 1;
}

if (this.range.start !== start) {
this.updateRange(start, end);
}
}
} // setting to a new range and rerender

// setting to a new range and rerender
}, {
key: "updateRange",
value: function updateRange(start, end) {
@@ -384,18 +406,16 @@
this.range.padFront = this.getPadFront();
this.range.padBehind = this.getPadBehind();
this.callUpdate(this.getRange());
}
} // return end base on start

// return end base on start
}, {
key: "getEndByStart",
value: function getEndByStart(start) {
var theoryEnd = start + this.param.keeps - 1;
var truelyEnd = Math.min(theoryEnd, this.getLastIndex());
return truelyEnd;
}
} // return total front offset

// return total front offset
}, {
key: "getPadFront",
value: function getPadFront() {
@@ -404,34 +424,34 @@
} else {
return this.getIndexOffset(this.range.start);
}
}
} // return total behind offset

// return total behind offset
}, {
key: "getPadBehind",
value: function getPadBehind() {
var end = this.range.end;
var lastIndex = this.getLastIndex();

if (this.isFixedType()) {
return (lastIndex - end) * this.fixedSizeValue;
}

return (lastIndex - end) * this.getEstimateSize();
}
} // get the item estimate size

// get the item estimate size
}, {
key: "getEstimateSize",
value: function getEstimateSize() {
return this.isFixedType() ? this.fixedSizeValue : this.firstRangeAverageSize || this.param.estimateSize;
}
}]);

return Virtual;
}();

/**
* props declaration for default, item and slot component
*/

var VirtualProps = {
dataKey: {
type: [String, Function],
@@ -459,8 +479,8 @@
direction: {
type: String,
"default": 'vertical' // the other value is horizontal
},

},
start: {
type: Number,
"default": 0
@@ -589,6 +609,7 @@
},
mounted: function mounted() {
var _this = this;

if (typeof ResizeObserver !== 'undefined') {
this.resizeObserver = new ResizeObserver(function () {
_this.dispatchSizeChange();
@@ -616,27 +637,28 @@
this.$parent.$emit(this.event, this.uniqueKey, this.getCurrentSize(), this.hasInitial);
}
}
};
}; // wrapping for item

// wrapping for item
var Item = Vue.component('virtual-list-item', {
mixins: [Wrapper],
props: ItemProps,
render: function render(h) {
var tag = this.tag,
component = this.component,
_this$extraProps = this.extraProps,
extraProps = _this$extraProps === void 0 ? {} : _this$extraProps,
index = this.index,
source = this.source,
_this$scopedSlots = this.scopedSlots,
scopedSlots = _this$scopedSlots === void 0 ? {} : _this$scopedSlots,
uniqueKey = this.uniqueKey,
slotComponent = this.slotComponent;
var props = _objectSpread2(_objectSpread2({}, extraProps), {}, {
component = this.component,
_this$extraProps = this.extraProps,
extraProps = _this$extraProps === void 0 ? {} : _this$extraProps,
index = this.index,
source = this.source,
_this$scopedSlots = this.scopedSlots,
scopedSlots = _this$scopedSlots === void 0 ? {} : _this$scopedSlots,
uniqueKey = this.uniqueKey,
slotComponent = this.slotComponent;

var props = _objectSpread2({}, extraProps, {
source: source,
index: index
});

return h(tag, {
key: uniqueKey,
attrs: {
@@ -651,15 +673,14 @@
scopedSlots: scopedSlots
})]);
}
});
}); // wrapping for slot

// wrapping for slot
var Slot = Vue.component('virtual-list-slot', {
mixins: [Wrapper],
props: SlotProps,
render: function render(h) {
var tag = this.tag,
uniqueKey = this.uniqueKey;
uniqueKey = this.uniqueKey;
return h(tag, {
key: uniqueKey,
attrs: {
@@ -707,19 +728,18 @@
created: function created() {
this.isHorizontal = this.direction === 'horizontal';
this.directionKey = this.isHorizontal ? 'scrollLeft' : 'scrollTop';
this.installVirtual();
this.installVirtual(); // listen item size change

// listen item size change
this.$on(EVENT_TYPE.ITEM, this.onItemResized);
this.$on(EVENT_TYPE.ITEM, this.onItemResized); // listen slot size change

// listen slot size change
if (this.$slots.header || this.$slots.footer) {
this.$on(EVENT_TYPE.SLOT, this.onSlotResized);
}
},
activated: function activated() {
// set back offset when awake from keep-alive
this.scrollToOffset(this.virtual.offset);

if (this.pageMode) {
document.addEventListener('scroll', this.onScroll, {
passive: false
@@ -737,9 +757,9 @@
this.scrollToIndex(this.start);
} else if (this.offset) {
this.scrollToOffset(this.offset);
}
} // in page mode we bind scroll event to document


// in page mode we bind scroll event to document
if (this.pageMode) {
this.updatePageModeFront();
document.addEventListener('scroll', this.onScroll, {
@@ -749,6 +769,7 @@
},
beforeDestroy: function beforeDestroy() {
this.virtual.destroy();

if (this.pageMode) {
document.removeEventListener('scroll', this.onScroll);
}
@@ -774,6 +795,7 @@
// return client viewport size
getClientSize: function getClientSize() {
var key = this.isHorizontal ? 'clientWidth' : 'clientHeight';

if (this.pageMode) {
return document.documentElement[key] || document.body[key];
} else {
@@ -784,6 +806,7 @@
// return all scroll size
getScrollSize: function getScrollSize() {
var key = this.isHorizontal ? 'scrollWidth' : 'scrollHeight';

if (this.pageMode) {
return document.documentElement[key] || document.body[key];
} else {
@@ -798,6 +821,7 @@
document.documentElement[this.directionKey] = offset;
} else {
var root = this.$refs.root;

if (root) {
root[this.directionKey] = offset;
}
@@ -816,14 +840,15 @@
// set current scroll position to bottom
scrollToBottom: function scrollToBottom() {
var _this = this;

var shepherd = this.$refs.shepherd;

if (shepherd) {
var offset = shepherd[this.isHorizontal ? 'offsetLeft' : 'offsetTop'];
this.scrollToOffset(offset);

// check if it's really scrolled to the bottom
this.scrollToOffset(offset); // check if it's really scrolled to the bottom
// maybe list doesn't render and calculate to last range
// so we need retry in next event loop until it really at bottom

setTimeout(function () {
if (_this.getOffset() + _this.getClientSize() + 1 < _this.getScrollSize()) {
_this.scrollToBottom();
@@ -835,6 +860,7 @@
// taking root offset relative to the browser as slot header size
updatePageModeFront: function updatePageModeFront() {
var root = this.$refs.root;

if (root) {
var rect = root.getBoundingClientRect();
var defaultView = root.ownerDocument.defaultView;
@@ -858,9 +884,8 @@
buffer: Math.round(this.keeps / 3),
// recommend for a third of keeps
uniqueIds: this.getUniqueIdFromDataSources()
}, this.onRangeChanged);
}, this.onRangeChanged); // sync initial range

// sync initial range
this.range = this.virtual.getRange();
},
getUniqueIdFromDataSources: function getUniqueIdFromDataSources() {
@@ -881,6 +906,7 @@
} else if (type === SLOT_TYPE.FOOTER) {
this.virtual.updateParam('slotFooterSize', size);
}

if (hasInit) {
this.virtual.handleSlotSizeChange();
}
@@ -892,22 +918,27 @@
onScroll: function onScroll(evt) {
var offset = this.getOffset();
var clientSize = this.getClientSize();
var scrollSize = this.getScrollSize();
var scrollSize = this.getScrollSize(); // iOS scroll-spring-back behavior will make direction mistake

// iOS scroll-spring-back behavior will make direction mistake
if (offset < 0 || offset + clientSize > scrollSize + 1 || !scrollSize) {
return;
}

this.virtual.handleScroll(offset);
this.emitEvent(offset, clientSize, scrollSize, evt);
},
// emit event in special position
emitEvent: function emitEvent(offset, clientSize, scrollSize, evt) {
this.$emit('scroll', evt, this.virtual.getRange());
if (this.virtual.isFront() && !!this.dataSources.length && offset - this.topThreshold <= 0) {

if (this.virtual.isFront() && !!this.dataSources.length && offset <= 0) {
this.$emit('totop');
} else if (this.virtual.isBehind() && offset + clientSize + this.bottomThreshold >= scrollSize) {
} else if (this.virtual.isFront() && !!this.dataSources.length && offset - this.topThreshold <= 0) {
this.$emit('toThresholdTop');
} else if (this.virtual.isBehind() && offset + clientSize >= scrollSize) {
this.$emit('tobottom');
} else if (this.virtual.isBehind() && offset + clientSize + this.bottomThreshold >= scrollSize) {
this.$emit('toThresholdBottom');
}
},
// get the real render slots based on range data
@@ -916,22 +947,25 @@
getRenderSlots: function getRenderSlots(h) {
var slots = [];
var _this$range = this.range,
start = _this$range.start,
end = _this$range.end;
start = _this$range.start,
end = _this$range.end;
var dataSources = this.dataSources,
dataKey = this.dataKey,
itemClass = this.itemClass,
itemTag = this.itemTag,
itemStyle = this.itemStyle,
isHorizontal = this.isHorizontal,
extraProps = this.extraProps,
dataComponent = this.dataComponent,
itemScopedSlots = this.itemScopedSlots;
dataKey = this.dataKey,
itemClass = this.itemClass,
itemTag = this.itemTag,
itemStyle = this.itemStyle,
isHorizontal = this.isHorizontal,
extraProps = this.extraProps,
dataComponent = this.dataComponent,
itemScopedSlots = this.itemScopedSlots;
var slotComponent = this.$scopedSlots && this.$scopedSlots.item;

for (var index = start; index <= end; index++) {
var dataSource = dataSources[index];

if (dataSource) {
var uniqueKey = typeof dataKey === 'function' ? dataKey(dataSource) : dataSource[dataKey];

if (typeof uniqueKey === 'string' || typeof uniqueKey === 'number') {
slots.push(h(Item, {
props: {
@@ -956,30 +990,31 @@
console.warn("Cannot get the index '".concat(index, "' from data-sources."));
}
}

return slots;
}
},
// render function, a closer-to-the-compiler alternative to templates
// https://vuejs.org/v2/guide/render-function.html#The-Data-Object-In-Depth
render: function render(h) {
var _this$$slots = this.$slots,
header = _this$$slots.header,
footer = _this$$slots.footer;
header = _this$$slots.header,
footer = _this$$slots.footer;
var _this$range2 = this.range,
padFront = _this$range2.padFront,
padBehind = _this$range2.padBehind;
padFront = _this$range2.padFront,
padBehind = _this$range2.padBehind;
var isHorizontal = this.isHorizontal,
pageMode = this.pageMode,
rootTag = this.rootTag,
wrapTag = this.wrapTag,
wrapClass = this.wrapClass,
wrapStyle = this.wrapStyle,
headerTag = this.headerTag,
headerClass = this.headerClass,
headerStyle = this.headerStyle,
footerTag = this.footerTag,
footerClass = this.footerClass,
footerStyle = this.footerStyle;
pageMode = this.pageMode,
rootTag = this.rootTag,
wrapTag = this.wrapTag,
wrapClass = this.wrapClass,
wrapStyle = this.wrapStyle,
headerTag = this.headerTag,
headerClass = this.headerClass,
headerStyle = this.headerStyle,
footerTag = this.footerTag,
footerClass = this.footerClass,
footerStyle = this.footerStyle;
var paddingStyle = {
padding: isHorizontal ? "0px ".concat(padBehind, "px 0px ").concat(padFront, "px") : "".concat(padFront, "px 0px ").concat(padBehind, "px")
};
@@ -989,8 +1024,7 @@
on: {
'&scroll': !pageMode && this.onScroll
}
}, [
// header slot
}, [// header slot
header ? h(Slot, {
"class": headerClass,
style: headerStyle,
@@ -999,16 +1033,14 @@
event: EVENT_TYPE.SLOT,
uniqueKey: SLOT_TYPE.HEADER
}
}, header) : null,
// main list
}, header) : null, // main list
h(wrapTag, {
"class": wrapClass,
attrs: {
role: 'group'
},
style: wrapperStyle
}, this.getRenderSlots(h)),
// footer slot
}, this.getRenderSlots(h)), // footer slot
footer ? h(Slot, {
"class": footerClass,
style: footerStyle,
@@ -1017,8 +1049,7 @@
event: EVENT_TYPE.SLOT,
uniqueKey: SLOT_TYPE.FOOTER
}
}, footer) : null,
// an empty element use to scroll to bottom
}, footer) : null, // an empty element use to scroll to bottom
h('div', {
ref: 'shepherd',
style: {
8 changes: 6 additions & 2 deletions src/index.js
Original file line number Diff line number Diff line change
@@ -269,10 +269,14 @@ const VirtualList = Vue.component('virtual-list', {
emitEvent (offset, clientSize, scrollSize, evt) {
this.$emit('scroll', evt, this.virtual.getRange())

if (this.virtual.isFront() && !!this.dataSources.length && (offset - this.topThreshold <= 0)) {
if (this.virtual.isFront() && !!this.dataSources.length && (offset <= 0)) {
this.$emit('totop')
} else if (this.virtual.isBehind() && (offset + clientSize + this.bottomThreshold >= scrollSize)) {
} else if (this.virtual.isFront() && !!this.dataSources.length && (offset - this.topThreshold <= 0)) {
this.$emit('toThresholdTop')
} else if (this.virtual.isBehind() && (offset + clientSize >= scrollSize)) {
this.$emit('tobottom')
} else if (this.virtual.isBehind() && (offset + clientSize + this.bottomThreshold >= scrollSize)) {
this.$emit('toThresholdBottom')
}
},

0 comments on commit 897983b

Please sign in to comment.