@tarojs/components-advanced 3.6.0-beta.0 → 3.6.0-beta.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/virtual-list/index.d.ts +0 -2
- package/dist/components/virtual-list/index.js +1 -2
- package/dist/components/virtual-list/preset.d.ts +13 -0
- package/dist/components/virtual-list/preset.js +33 -1
- package/dist/components/virtual-list/react/list.d.ts +0 -10
- package/dist/components/virtual-list/react/list.js +37 -44
- package/dist/components/virtual-list/vue/list.d.ts +2 -1
- package/dist/components/virtual-list/vue/list.js +50 -21
- package/dist/utils/index.d.ts +3 -0
- package/dist/utils/index.js +3 -0
- package/dist/utils/math.d.ts +2 -0
- package/dist/utils/math.js +18 -0
- package/package.json +4 -4
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import type { BaseEventOrig, BaseEventOrigFunction, ScrollViewProps, StandardProps } from '@tarojs/components';
|
|
2
2
|
import type { Component, ComponentType, CSSProperties, ReactNode } from 'react';
|
|
3
|
-
import type { VuePlugin } from '../../../typings/vue';
|
|
4
3
|
interface VirtualListProps extends Omit<StandardProps, 'children'> {
|
|
5
4
|
/** 列表的高度。 */
|
|
6
5
|
height: string | number;
|
|
@@ -186,6 +185,5 @@ declare namespace VirtualListProps {
|
|
|
186
185
|
declare class VirtualListComponent extends Component<VirtualListProps> {
|
|
187
186
|
}
|
|
188
187
|
declare const VirtualList: typeof VirtualListComponent;
|
|
189
|
-
export declare const registerVirtualList: VuePlugin;
|
|
190
188
|
export { VirtualList, VirtualListProps };
|
|
191
189
|
export default VirtualList;
|
|
@@ -98,7 +98,6 @@
|
|
|
98
98
|
* @see https://taro-docs.jd.com/docs/virtual-list
|
|
99
99
|
*/
|
|
100
100
|
|
|
101
|
-
var VirtualList = require('./react').default;
|
|
102
|
-
export var registerVirtualList = require('./vue').default;
|
|
101
|
+
var VirtualList = process.env.FRAMEWORK.includes('vue') ? require('./vue').default : require('./react').default;
|
|
103
102
|
export { VirtualList };
|
|
104
103
|
export default VirtualList;
|
|
@@ -20,6 +20,16 @@ export default class Preset {
|
|
|
20
20
|
protected refresh?: TFunc;
|
|
21
21
|
itemList: ListSet;
|
|
22
22
|
constructor(props: IProps, refresh?: TFunc);
|
|
23
|
+
wrapperField: {
|
|
24
|
+
scrollLeft: number;
|
|
25
|
+
scrollTop: number;
|
|
26
|
+
scrollHeight: number;
|
|
27
|
+
scrollWidth: number;
|
|
28
|
+
clientHeight: number;
|
|
29
|
+
clientWidth: number;
|
|
30
|
+
diffOffset: number;
|
|
31
|
+
};
|
|
32
|
+
diffList: number[];
|
|
23
33
|
init(props: IProps): void;
|
|
24
34
|
update(props: IProps): void;
|
|
25
35
|
get id(): string;
|
|
@@ -30,6 +40,9 @@ export default class Preset {
|
|
|
30
40
|
get outerTagName(): string | import("react").ComponentType<{}>;
|
|
31
41
|
get innerTagName(): string | import("react").ComponentType<{}>;
|
|
32
42
|
get itemTagName(): string | import("react").ComponentType<{}>;
|
|
43
|
+
get field(): Record<string, number>;
|
|
44
|
+
set field(o: Record<string, number>);
|
|
45
|
+
isShaking(diff?: number): boolean;
|
|
33
46
|
getItemStyleCache: import("memoize-one").MemoizedFn<(_itemSize?: IProps['itemSize'] | false, _layout?: IProps['layout'] | false, _direction?: IProps['direction'] | false) => {}>;
|
|
34
47
|
getItemStyle(index: number): any;
|
|
35
48
|
}
|
|
@@ -3,7 +3,7 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
|
|
|
3
3
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
4
4
|
import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
|
|
5
5
|
import memoizeOne from 'memoize-one';
|
|
6
|
-
import { convertNumber2PX } from '../../utils';
|
|
6
|
+
import { convertNumber2PX, isCosDistributing } from '../../utils';
|
|
7
7
|
import ListSet from './list-set';
|
|
8
8
|
import { isHorizontalFunc, isRtlFunc } from './utils';
|
|
9
9
|
var INSTANCE_ID = 0;
|
|
@@ -13,6 +13,16 @@ var Preset = /*#__PURE__*/function () {
|
|
|
13
13
|
this.props = props;
|
|
14
14
|
this.refresh = refresh;
|
|
15
15
|
_defineProperty(this, "itemList", void 0);
|
|
16
|
+
_defineProperty(this, "wrapperField", {
|
|
17
|
+
scrollLeft: 0,
|
|
18
|
+
scrollTop: 0,
|
|
19
|
+
scrollHeight: 0,
|
|
20
|
+
scrollWidth: 0,
|
|
21
|
+
clientHeight: 0,
|
|
22
|
+
clientWidth: 0,
|
|
23
|
+
diffOffset: 0
|
|
24
|
+
});
|
|
25
|
+
_defineProperty(this, "diffList", [0, 0, 0]);
|
|
16
26
|
_defineProperty(this, "getItemStyleCache", memoizeOne(function (_itemSize, _layout, _direction) {
|
|
17
27
|
// TODO: Cache of item styles, keyed by item index.
|
|
18
28
|
return {};
|
|
@@ -71,6 +81,28 @@ var Preset = /*#__PURE__*/function () {
|
|
|
71
81
|
get: function get() {
|
|
72
82
|
return this.props.itemElementType || this.props.itemTagName || 'div';
|
|
73
83
|
}
|
|
84
|
+
}, {
|
|
85
|
+
key: "field",
|
|
86
|
+
get: function get() {
|
|
87
|
+
return this.wrapperField;
|
|
88
|
+
},
|
|
89
|
+
set: function set(o) {
|
|
90
|
+
Object.assign(this.wrapperField, o);
|
|
91
|
+
// Object.keys(o).forEach(key => {
|
|
92
|
+
// if (typeof o[key] === 'number' && typeof this.wrapperField[key] === 'number') {
|
|
93
|
+
// this.wrapperField[key] = o[key]
|
|
94
|
+
// }
|
|
95
|
+
// })
|
|
96
|
+
}
|
|
97
|
+
}, {
|
|
98
|
+
key: "isShaking",
|
|
99
|
+
value: function isShaking(diff) {
|
|
100
|
+
var list = this.diffList.slice(-3);
|
|
101
|
+
this.diffList.push(diff);
|
|
102
|
+
return list.findIndex(function (e) {
|
|
103
|
+
return Math.abs(e) === Math.abs(diff);
|
|
104
|
+
}) !== -1 || isCosDistributing(this.diffList.slice(-4));
|
|
105
|
+
}
|
|
74
106
|
}, {
|
|
75
107
|
key: "getItemStyle",
|
|
76
108
|
value: function getItemStyle(index) {
|
|
@@ -14,22 +14,12 @@ export interface IState {
|
|
|
14
14
|
export default class List extends React.PureComponent<IProps, IState> {
|
|
15
15
|
static defaultProps: IProps;
|
|
16
16
|
static getDerivedStateFromProps(nextProps: IProps, prevState: IState): any;
|
|
17
|
-
shouldComponentUpdate: (_nextProps: IProps, nextState: IState) => boolean;
|
|
18
17
|
itemList: ListSet;
|
|
19
18
|
preset: Preset;
|
|
20
19
|
constructor(props: IProps);
|
|
21
20
|
refresh: () => void;
|
|
22
21
|
_outerRef: any;
|
|
23
22
|
_resetIsScrollingTimeoutId: any;
|
|
24
|
-
field: {
|
|
25
|
-
scrollLeft: number;
|
|
26
|
-
scrollTop: number;
|
|
27
|
-
scrollHeight: number;
|
|
28
|
-
scrollWidth: number;
|
|
29
|
-
clientHeight: number;
|
|
30
|
-
clientWidth: number;
|
|
31
|
-
diffOffset: number;
|
|
32
|
-
};
|
|
33
23
|
_callOnItemsRendered: import("memoize-one").MemoizedFn<(this: any, overscanStartIndex: any, overscanStopIndex: any, visibleStartIndex: any, visibleStopIndex: any) => any>;
|
|
34
24
|
_callOnScroll: import("memoize-one").MemoizedFn<(this: any, scrollDirection: any, scrollOffset: any, scrollUpdateWasRequested: any, detail: any) => void>;
|
|
35
25
|
_callPropsCallbacks(prevProps?: any, prevState?: any): void;
|
|
@@ -27,32 +27,22 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
27
27
|
var _this;
|
|
28
28
|
_classCallCheck(this, List);
|
|
29
29
|
_this = _super.call(this, props);
|
|
30
|
-
_defineProperty(_assertThisInitialized(_this), "shouldComponentUpdate", IS_PREACT ? function (_nextProps, nextState) {
|
|
31
|
-
if (_this.state.refreshCount !== nextState.refreshCount) {
|
|
32
|
-
return true;
|
|
33
|
-
}
|
|
34
|
-
} : undefined);
|
|
35
30
|
_defineProperty(_assertThisInitialized(_this), "itemList", void 0);
|
|
36
31
|
_defineProperty(_assertThisInitialized(_this), "preset", void 0);
|
|
37
32
|
_defineProperty(_assertThisInitialized(_this), "refresh", function () {
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
33
|
+
if (IS_PREACT) {
|
|
34
|
+
_this.forceUpdate();
|
|
35
|
+
} else {
|
|
36
|
+
_this.setState(function (_ref) {
|
|
37
|
+
var refreshCount = _ref.refreshCount;
|
|
38
|
+
return {
|
|
39
|
+
refreshCount: ++refreshCount
|
|
40
|
+
};
|
|
41
|
+
});
|
|
42
|
+
}
|
|
44
43
|
});
|
|
45
44
|
_defineProperty(_assertThisInitialized(_this), "_outerRef", undefined);
|
|
46
45
|
_defineProperty(_assertThisInitialized(_this), "_resetIsScrollingTimeoutId", null);
|
|
47
|
-
_defineProperty(_assertThisInitialized(_this), "field", {
|
|
48
|
-
scrollLeft: 0,
|
|
49
|
-
scrollTop: 0,
|
|
50
|
-
scrollHeight: 0,
|
|
51
|
-
scrollWidth: 0,
|
|
52
|
-
clientHeight: 0,
|
|
53
|
-
clientWidth: 0,
|
|
54
|
-
diffOffset: 0
|
|
55
|
-
});
|
|
56
46
|
_defineProperty(_assertThisInitialized(_this), "_callOnItemsRendered", memoizeOne(function (overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex) {
|
|
57
47
|
return _this.props.onItemsRendered({
|
|
58
48
|
overscanStartIndex: overscanStartIndex,
|
|
@@ -102,15 +92,17 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
102
92
|
scrollLeft = _event$currentTarget.scrollLeft,
|
|
103
93
|
scrollHeight = _event$currentTarget.scrollHeight,
|
|
104
94
|
scrollWidth = _event$currentTarget.scrollWidth;
|
|
105
|
-
_this.field
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
95
|
+
_this.preset.field = {
|
|
96
|
+
scrollHeight: scrollHeight,
|
|
97
|
+
scrollWidth: _this.itemList.getOffsetSize(),
|
|
98
|
+
scrollTop: scrollTop,
|
|
99
|
+
scrollLeft: scrollLeft,
|
|
100
|
+
clientHeight: scrollHeight,
|
|
101
|
+
clientWidth: scrollWidth
|
|
102
|
+
};
|
|
111
103
|
_this.setState(function (prevState) {
|
|
112
|
-
var diffOffset = _this.field.scrollLeft - scrollLeft;
|
|
113
|
-
if (prevState.scrollOffset === scrollLeft || _this.
|
|
104
|
+
var diffOffset = _this.preset.field.scrollLeft - scrollLeft;
|
|
105
|
+
if (prevState.scrollOffset === scrollLeft || _this.preset.isShaking(diffOffset)) {
|
|
114
106
|
// Scroll position may have been updated by cDM/cDU,
|
|
115
107
|
// In which case we don't need to trigger another render,
|
|
116
108
|
// And we don't want to update state.isScrolling.
|
|
@@ -132,8 +124,9 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
132
124
|
}
|
|
133
125
|
} // Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
|
|
134
126
|
|
|
135
|
-
|
|
136
|
-
|
|
127
|
+
_this.preset.field = {
|
|
128
|
+
scrollWidth: scrollOffset
|
|
129
|
+
};
|
|
137
130
|
return {
|
|
138
131
|
isScrolling: true,
|
|
139
132
|
scrollDirection: prevState.scrollOffset < scrollLeft ? 'forward' : 'backward',
|
|
@@ -150,8 +143,8 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
150
143
|
scrollTop = _event$currentTarget2.scrollTop,
|
|
151
144
|
scrollLeft = _event$currentTarget2.scrollLeft;
|
|
152
145
|
_this.setState(function (prevState) {
|
|
153
|
-
var diffOffset = _this.field.scrollTop - scrollTop;
|
|
154
|
-
if (prevState.scrollOffset === scrollTop || _this.
|
|
146
|
+
var diffOffset = _this.preset.field.scrollTop - scrollTop;
|
|
147
|
+
if (prevState.scrollOffset === scrollTop || _this.preset.isShaking(diffOffset)) {
|
|
155
148
|
// Scroll position may have been updated by cDM/cDU,
|
|
156
149
|
// In which case we don't need to trigger another render,
|
|
157
150
|
// And we don't want to update state.isScrolling.
|
|
@@ -160,13 +153,15 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
160
153
|
// FIXME preact 中使用时,该组件会出现触底滚动事件重复触发导致的抖动问题,后续修复
|
|
161
154
|
// Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
|
|
162
155
|
var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
|
|
163
|
-
_this.field
|
|
164
|
-
|
|
165
|
-
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
156
|
+
_this.preset.field = {
|
|
157
|
+
scrollHeight: _this.itemList.getOffsetSize(),
|
|
158
|
+
scrollWidth: scrollWidth,
|
|
159
|
+
scrollTop: scrollOffset,
|
|
160
|
+
scrollLeft: scrollLeft,
|
|
161
|
+
clientHeight: clientHeight,
|
|
162
|
+
clientWidth: scrollWidth,
|
|
163
|
+
diffOffset: _this.preset.field.scrollTop - scrollOffset
|
|
164
|
+
};
|
|
170
165
|
return {
|
|
171
166
|
isScrolling: true,
|
|
172
167
|
scrollDirection: prevState.scrollOffset < scrollOffset ? 'forward' : 'backward',
|
|
@@ -237,7 +232,7 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
237
232
|
}
|
|
238
233
|
if (typeof this.props.onScroll === 'function') {
|
|
239
234
|
if (!prevState || prevState.scrollDirection !== this.state.scrollDirection || prevState.scrollOffset !== this.state.scrollOffset || prevState.scrollUpdateWasRequested !== this.state.scrollUpdateWasRequested) {
|
|
240
|
-
this._callOnScroll(this.state.scrollDirection, this.state.scrollOffset, this.state.scrollUpdateWasRequested, this.field);
|
|
235
|
+
this._callOnScroll(this.state.scrollDirection, this.state.scrollOffset, this.state.scrollUpdateWasRequested, this.preset.field);
|
|
241
236
|
}
|
|
242
237
|
}
|
|
243
238
|
setTimeout(function () {
|
|
@@ -428,9 +423,9 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
428
423
|
}, style)
|
|
429
424
|
});
|
|
430
425
|
if (isHorizontal) {
|
|
431
|
-
outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.field.scrollLeft;
|
|
426
|
+
outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollLeft;
|
|
432
427
|
} else {
|
|
433
|
-
outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.field.scrollTop;
|
|
428
|
+
outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollTop;
|
|
434
429
|
}
|
|
435
430
|
if (this.preset.isRelative) {
|
|
436
431
|
var pre = convertNumber2PX(this.itemList.getOffsetSize(startIndex));
|
|
@@ -469,8 +464,6 @@ var List = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
469
464
|
value: function getDerivedStateFromProps(nextProps, prevState) {
|
|
470
465
|
return validateListProps(nextProps, prevState);
|
|
471
466
|
}
|
|
472
|
-
|
|
473
|
-
// Note: preact 不会在未使用的 state 更新后主动更新,需新增判断
|
|
474
467
|
}]);
|
|
475
468
|
return List;
|
|
476
469
|
}(React.PureComponent); // NOTE: I considered further wrapping individual items with a pure ListItem component.
|
|
@@ -93,13 +93,14 @@ declare const _default: {
|
|
|
93
93
|
scrollOffset: any;
|
|
94
94
|
scrollUpdateWasRequested: boolean;
|
|
95
95
|
resetIsScrollingTimeoutId: any;
|
|
96
|
+
refreshCount: number;
|
|
96
97
|
};
|
|
97
98
|
methods: {
|
|
98
99
|
refresh(): void;
|
|
99
100
|
scrollTo(scrollOffset: any): void;
|
|
100
101
|
scrollToItem(index: any, align?: string): void;
|
|
101
102
|
_callOnItemsRendered: import("memoize-one").MemoizedFn<(this: any, overscanStartIndex: any, overscanStopIndex: any, visibleStartIndex: any, visibleStopIndex: any) => any>;
|
|
102
|
-
_callOnScroll: import("memoize-one").MemoizedFn<(this: any, scrollDirection: any, scrollOffset: any, scrollUpdateWasRequested: any) => void>;
|
|
103
|
+
_callOnScroll: import("memoize-one").MemoizedFn<(this: any, scrollDirection: any, scrollOffset: any, scrollUpdateWasRequested: any, detail: any) => void>;
|
|
103
104
|
_callPropsCallbacks(): void;
|
|
104
105
|
_getSizeUploadSync(index: number, isHorizontal: boolean): Promise<unknown>;
|
|
105
106
|
_getRangeToRender(): any;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import _typeof from "@babel/runtime/helpers/esm/typeof";
|
|
2
2
|
import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
|
|
3
3
|
import memoizeOne from 'memoize-one';
|
|
4
|
-
import { nextTick, renderSlot } from 'vue';
|
|
5
4
|
import { IS_VUE3, IS_WEB } from '../../../utils/constants';
|
|
6
5
|
import { convertNumber2PX } from '../../../utils/convert';
|
|
7
6
|
import { omit } from '../../../utils/lodash';
|
|
@@ -106,12 +105,13 @@ export default {
|
|
|
106
105
|
scrollDirection: 'forward',
|
|
107
106
|
scrollOffset: typeof this.$props.initialScrollOffset === 'number' ? this.$props.initialScrollOffset : 0,
|
|
108
107
|
scrollUpdateWasRequested: false,
|
|
109
|
-
resetIsScrollingTimeoutId: null
|
|
108
|
+
resetIsScrollingTimeoutId: null,
|
|
109
|
+
refreshCount: 0
|
|
110
110
|
};
|
|
111
111
|
},
|
|
112
112
|
methods: {
|
|
113
113
|
refresh: function refresh() {
|
|
114
|
-
this
|
|
114
|
+
this.refreshCount = this.refreshCount + 1;
|
|
115
115
|
},
|
|
116
116
|
scrollTo: function scrollTo(scrollOffset) {
|
|
117
117
|
scrollOffset = Math.max(0, scrollOffset);
|
|
@@ -121,7 +121,7 @@ export default {
|
|
|
121
121
|
this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
|
|
122
122
|
this.scrollOffset = scrollOffset;
|
|
123
123
|
this.scrollUpdateWasRequested = true;
|
|
124
|
-
nextTick(this._resetIsScrollingDebounced);
|
|
124
|
+
this.$nextTick(this._resetIsScrollingDebounced);
|
|
125
125
|
},
|
|
126
126
|
scrollToItem: function scrollToItem(index) {
|
|
127
127
|
var align = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 'auto';
|
|
@@ -138,11 +138,12 @@ export default {
|
|
|
138
138
|
visibleStopIndex: visibleStopIndex
|
|
139
139
|
});
|
|
140
140
|
}),
|
|
141
|
-
_callOnScroll: memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested) {
|
|
141
|
+
_callOnScroll: memoizeOne(function (scrollDirection, scrollOffset, scrollUpdateWasRequested, detail) {
|
|
142
142
|
this.$emit('scroll', {
|
|
143
143
|
scrollDirection: scrollDirection,
|
|
144
144
|
scrollOffset: scrollOffset,
|
|
145
|
-
scrollUpdateWasRequested: scrollUpdateWasRequested
|
|
145
|
+
scrollUpdateWasRequested: scrollUpdateWasRequested,
|
|
146
|
+
detail: detail
|
|
146
147
|
});
|
|
147
148
|
}),
|
|
148
149
|
_callPropsCallbacks: function _callPropsCallbacks() {
|
|
@@ -159,7 +160,7 @@ export default {
|
|
|
159
160
|
this._callOnItemsRendered(overscanStartIndex, overscanStopIndex, visibleStartIndex, visibleStopIndex);
|
|
160
161
|
}
|
|
161
162
|
}
|
|
162
|
-
this._callOnScroll(this.scrollDirection, this.scrollOffset, this.scrollUpdateWasRequested);
|
|
163
|
+
this._callOnScroll(this.scrollDirection, this.scrollOffset, this.scrollUpdateWasRequested, this.preset.field);
|
|
163
164
|
setTimeout(function () {
|
|
164
165
|
var _this$_getRangeToRend3 = _this._getRangeToRender(),
|
|
165
166
|
_this$_getRangeToRend4 = _slicedToArray(_this$_getRangeToRend3, 2),
|
|
@@ -202,14 +203,25 @@ export default {
|
|
|
202
203
|
return this.itemList.getRangeToRender(this.$data.scrollDirection, this.$data.scrollOffset, this.$data.isScrolling);
|
|
203
204
|
},
|
|
204
205
|
_onScrollHorizontal: function _onScrollHorizontal(event) {
|
|
205
|
-
var clientWidth = this.$props.width;
|
|
206
206
|
var _event$currentTarget = event.currentTarget,
|
|
207
|
+
clientWidth = _event$currentTarget.clientWidth,
|
|
208
|
+
scrollTop = _event$currentTarget.scrollTop,
|
|
207
209
|
scrollLeft = _event$currentTarget.scrollLeft,
|
|
210
|
+
scrollHeight = _event$currentTarget.scrollHeight,
|
|
208
211
|
scrollWidth = _event$currentTarget.scrollWidth;
|
|
212
|
+
this.preset.field = {
|
|
213
|
+
scrollHeight: scrollHeight,
|
|
214
|
+
scrollWidth: this.itemList.getOffsetSize(),
|
|
215
|
+
scrollTop: scrollTop,
|
|
216
|
+
scrollLeft: scrollLeft,
|
|
217
|
+
clientHeight: scrollHeight,
|
|
218
|
+
clientWidth: scrollWidth
|
|
219
|
+
};
|
|
209
220
|
if (this.$props.onScrollNative) {
|
|
210
221
|
this.$props.onScrollNative(event);
|
|
211
222
|
}
|
|
212
|
-
|
|
223
|
+
var diffOffset = this.preset.field.scrollLeft - scrollLeft;
|
|
224
|
+
if (this.scrollOffset === scrollLeft || this.preset.isShaking(diffOffset)) {
|
|
213
225
|
return;
|
|
214
226
|
}
|
|
215
227
|
var scrollOffset = scrollLeft;
|
|
@@ -230,31 +242,46 @@ export default {
|
|
|
230
242
|
|
|
231
243
|
// Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
|
|
232
244
|
scrollOffset = Math.max(0, Math.min(scrollOffset, scrollWidth - clientWidth));
|
|
245
|
+
this.preset.field = {
|
|
246
|
+
scrollWidth: scrollOffset
|
|
247
|
+
};
|
|
233
248
|
this.isScrolling = true;
|
|
234
249
|
this.scrollDirection = this.scrollOffset < scrollLeft ? 'forward' : 'backward';
|
|
235
250
|
this.scrollOffset = scrollOffset;
|
|
236
251
|
this.scrollUpdateWasRequested = false;
|
|
237
|
-
nextTick(this._resetIsScrollingDebounced);
|
|
252
|
+
this.$nextTick(this._resetIsScrollingDebounced);
|
|
238
253
|
},
|
|
239
254
|
_onScrollVertical: function _onScrollVertical(event) {
|
|
240
|
-
var clientHeight = this.$props.height;
|
|
241
255
|
var _event$currentTarget2 = event.currentTarget,
|
|
256
|
+
clientHeight = _event$currentTarget2.clientHeight,
|
|
242
257
|
scrollHeight = _event$currentTarget2.scrollHeight,
|
|
243
|
-
|
|
258
|
+
scrollWidth = _event$currentTarget2.scrollWidth,
|
|
259
|
+
scrollTop = _event$currentTarget2.scrollTop,
|
|
260
|
+
scrollLeft = _event$currentTarget2.scrollLeft;
|
|
244
261
|
if (this.$props.onScrollNative) {
|
|
245
262
|
this.$props.onScrollNative(event);
|
|
246
263
|
}
|
|
247
|
-
|
|
264
|
+
var diffOffset = this.preset.field.scrollTop - scrollTop;
|
|
265
|
+
if (this.scrollOffset === scrollTop || this.preset.isShaking(diffOffset)) {
|
|
248
266
|
return;
|
|
249
267
|
}
|
|
250
268
|
|
|
251
269
|
// Prevent Safari's elastic scrolling from causing visual shaking when scrolling past bounds.
|
|
252
270
|
var scrollOffset = Math.max(0, Math.min(scrollTop, scrollHeight - clientHeight));
|
|
271
|
+
this.preset.field = {
|
|
272
|
+
scrollHeight: this.itemList.getOffsetSize(),
|
|
273
|
+
scrollWidth: scrollWidth,
|
|
274
|
+
scrollTop: scrollOffset,
|
|
275
|
+
scrollLeft: scrollLeft,
|
|
276
|
+
clientHeight: clientHeight,
|
|
277
|
+
clientWidth: scrollWidth,
|
|
278
|
+
diffOffset: this.preset.field.scrollTop - scrollOffset
|
|
279
|
+
};
|
|
253
280
|
this.isScrolling = true;
|
|
254
281
|
this.scrollDirection = this.scrollOffset < scrollOffset ? 'forward' : 'backward';
|
|
255
282
|
this.scrollOffset = scrollOffset;
|
|
256
283
|
this.scrollUpdateWasRequested = false;
|
|
257
|
-
nextTick(this._resetIsScrollingDebounced);
|
|
284
|
+
this.$nextTick(this._resetIsScrollingDebounced);
|
|
258
285
|
},
|
|
259
286
|
_outerRefSetter: function _outerRefSetter(ref) {
|
|
260
287
|
var outerRef = this.$props.outerRef;
|
|
@@ -275,7 +302,7 @@ export default {
|
|
|
275
302
|
var _this3 = this;
|
|
276
303
|
this.resetIsScrollingTimeoutId = null;
|
|
277
304
|
this.isScrolling = false;
|
|
278
|
-
nextTick(function () {
|
|
305
|
+
this.$nextTick(function () {
|
|
279
306
|
_this3.preset.getItemStyleCache(-1, null);
|
|
280
307
|
});
|
|
281
308
|
}
|
|
@@ -422,13 +449,14 @@ export default {
|
|
|
422
449
|
}
|
|
423
450
|
};
|
|
424
451
|
if (isHorizontal) {
|
|
425
|
-
outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.field.scrollLeft;
|
|
452
|
+
outerElementProps.scrollLeft = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollLeft;
|
|
426
453
|
} else {
|
|
427
|
-
outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.field.scrollTop;
|
|
454
|
+
outerElementProps.scrollTop = scrollUpdateWasRequested ? scrollOffset : this.preset.field.scrollTop;
|
|
428
455
|
}
|
|
429
456
|
if (this.preset.isRelative) {
|
|
457
|
+
var _this$$slots$top, _this$$slots, _this$$slots$bottom, _this$$slots2;
|
|
430
458
|
var pre = convertNumber2PX(this.itemList.getOffsetSize(startIndex));
|
|
431
|
-
return _render(this.preset.outerTagName, outerElementProps, [IS_VUE3 ?
|
|
459
|
+
return _render(this.preset.outerTagName, outerElementProps, [IS_VUE3 ? (_this$$slots$top = (_this$$slots = this.$slots).top) === null || _this$$slots$top === void 0 ? void 0 : _this$$slots$top.call(_this$$slots) : this.$slots.top, _render(this.preset.itemTagName, {
|
|
432
460
|
key: "".concat(id, "-pre"),
|
|
433
461
|
id: "".concat(id, "-pre"),
|
|
434
462
|
style: {
|
|
@@ -443,9 +471,10 @@ export default {
|
|
|
443
471
|
pointerEvents: isScrolling ? 'none' : 'auto',
|
|
444
472
|
position: 'relative'
|
|
445
473
|
}
|
|
446
|
-
}, items), IS_VUE3 ?
|
|
474
|
+
}, items), IS_VUE3 ? (_this$$slots$bottom = (_this$$slots2 = this.$slots).bottom) === null || _this$$slots$bottom === void 0 ? void 0 : _this$$slots$bottom.call(_this$$slots2) : this.$slots.bottom]);
|
|
447
475
|
} else {
|
|
448
|
-
|
|
476
|
+
var _this$$slots$top2, _this$$slots3, _this$$slots$bottom2, _this$$slots4;
|
|
477
|
+
return _render(this.preset.outerTagName, outerElementProps, [IS_VUE3 ? (_this$$slots$top2 = (_this$$slots3 = this.$slots).top) === null || _this$$slots$top2 === void 0 ? void 0 : _this$$slots$top2.call(_this$$slots3) : this.$slots.top, _render(this.preset.innerTagName, {
|
|
449
478
|
ref: innerRef,
|
|
450
479
|
key: "".concat(id, "-inner"),
|
|
451
480
|
id: "".concat(id, "-inner"),
|
|
@@ -455,7 +484,7 @@ export default {
|
|
|
455
484
|
position: 'relative',
|
|
456
485
|
width: !isHorizontal ? '100%' : estimatedTotalSize
|
|
457
486
|
}
|
|
458
|
-
}, items), IS_VUE3 ?
|
|
487
|
+
}, items), IS_VUE3 ? (_this$$slots$bottom2 = (_this$$slots4 = this.$slots).bottom) === null || _this$$slots$bottom2 === void 0 ? void 0 : _this$$slots$bottom2.call(_this$$slots4) : this.$slots.bottom]);
|
|
459
488
|
}
|
|
460
489
|
}
|
|
461
490
|
};
|
package/dist/utils/index.d.ts
CHANGED
package/dist/utils/index.js
CHANGED
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export function getMiddleNumber() {
|
|
2
|
+
for (var _len = arguments.length, list = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
3
|
+
list[_key] = arguments[_key];
|
|
4
|
+
}
|
|
5
|
+
return list.sort(function (a, b) {
|
|
6
|
+
return a - b;
|
|
7
|
+
})[Math.floor(list.length / 2)];
|
|
8
|
+
}
|
|
9
|
+
export function isCosDistributing(list) {
|
|
10
|
+
var datum = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
|
|
11
|
+
var flags = 0;
|
|
12
|
+
for (var i = 0; i < list.length - 1; i++) {
|
|
13
|
+
if (getMiddleNumber(list[i], datum, list[i + 1]) === datum) {
|
|
14
|
+
flags++;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
return flags === list.length - 1;
|
|
18
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tarojs/components-advanced",
|
|
3
|
-
"version": "3.6.0-beta.
|
|
3
|
+
"version": "3.6.0-beta.1",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"types": "dist/index.d.ts",
|
|
@@ -14,8 +14,8 @@
|
|
|
14
14
|
"dependencies": {
|
|
15
15
|
"memoize-one": "^6.0.0",
|
|
16
16
|
"postcss": "^8.4.18",
|
|
17
|
-
"@tarojs/components": "3.6.0-beta.
|
|
18
|
-
"@tarojs/shared": "3.6.0-beta.
|
|
17
|
+
"@tarojs/components": "3.6.0-beta.1",
|
|
18
|
+
"@tarojs/shared": "3.6.0-beta.1"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
21
|
"@babel/cli": "^7.14.5",
|
|
@@ -26,7 +26,7 @@
|
|
|
26
26
|
"react-dom": "^18.2.0",
|
|
27
27
|
"typescript": "^4.7.4",
|
|
28
28
|
"vue": "^3.0.0",
|
|
29
|
-
"babel-preset-taro": "3.6.0-beta.
|
|
29
|
+
"babel-preset-taro": "3.6.0-beta.1"
|
|
30
30
|
},
|
|
31
31
|
"peerDependencies": {
|
|
32
32
|
"react": ">=17"
|