Skip to content

Commit 10a9bda

Browse files
QiuShuiBaiQiuShuiBai
committed
feat(sticky): 兼容rn
1 parent ec4651c commit 10a9bda

7 files changed

Lines changed: 31 additions & 43 deletions

File tree

‎example/ReactNativeProject/index.js‎

Lines changed: 23 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1461,8 +1461,7 @@ __webpack_require__.g.currentInject = {
14611461
};
14621462
__webpack_require__.g.currentInject.render = function (createElement, getComponent) {
14631463
return createElement(getComponent("mpx-view"), null, createElement(getComponent("mpx-view"), null, createElement(getComponent("mpx-inline-text"), null, this.pos)), createElement(getComponent("cube-sticky"), {
1464-
pos: this.pos,
1465-
offset: 60
1464+
pos: this.pos
14661465
}, createElement(getComponent("mpx-scroll-view"), {
14671466
"scroll-y": true,
14681467
bindscroll: this.onScroll,
@@ -1550,9 +1549,10 @@ __webpack_require__.g.currentInject.render = function (createElement, getCompone
15501549
ishost: true,
15511550
style: this.__getStyle("mpx-root-view host-_5575c544", "", "", "")
15521551
}, createElement(getComponent("mpx-view"), {
1552+
ref: this.__getRefVal('node', [[".", this.__getClass("cube-sticky", "")]], "ref_fn_1"),
15531553
style: this.__getStyle("cube-sticky", "", "", this.containerStyle)
15541554
}, this.__getSlot(), createElement(getComponent("mpx-view"), {
1555-
ref: this.__getRefVal('node', [["", "fixedEle"]], "ref_fn_1"),
1555+
ref: this.__getRefVal('node', [["", "fixedEle"]], "ref_fn_2"),
15561556
style: this.__getStyle("cube-sticky-fixed", "", "", this.fixedEleStyle)
15571557
})));
15581558
};
@@ -14477,7 +14477,6 @@ var EVENT_DIFF_CHANGE = 'diff-change';
1447714477
fixedEleHeight: 0,
1447814478
positions: [],
1447914479
heights: [],
14480-
_refreshTimer: null,
1448114480
eles: []
1448214481
},
1448314482
computed: {
@@ -14529,7 +14528,7 @@ var EVENT_DIFF_CHANGE = 'diff-change';
1452914528
right: this.rootRect.right + 'px',
1453014529
width: this.rects[newIndex].width + 'px'
1453114530
});
14532-
console.log(newEle.setStyle, this.rootRect, this.rects[newIndex]);
14531+
console.log(newEle.setContentStyle, this.rootRect, this.rects[newIndex]);
1453314532
}
1453414533
},
1453514534
currentDiff: function currentDiff(newVal) {
@@ -14546,33 +14545,25 @@ var EVENT_DIFF_CHANGE = 'diff-change';
1454614545
}
1454714546
},
1454814547
methods: {
14549-
_scheduleRefresh: function _scheduleRefresh() {
14550-
var _this2 = this;
14551-
clearTimeout(this._refreshTimer);
14552-
this._refreshTimer = setTimeout(function () {
14553-
_this2.refresh();
14554-
}, 0);
14555-
},
1455614548
_getEles: function _getEles() {
1455714549
var nodes = this.getRelationNodes((_sticky_ele_index_mpx_resolve__WEBPACK_IMPORTED_MODULE_1___default()));
1455814550
return nodes || [];
1455914551
},
1456014552
// @vuese
1456114553
// 刷新 sticky 内部元素位置与高度
1456214554
refresh: function refresh() {
14563-
var _this3 = this;
14555+
var _this2 = this;
1456414556
this.$nextTick(function () {
14565-
_this3.eles = _this3._getEles();
14566-
_this3.eles.forEach(function (ele) {
14557+
_this2.eles = _this2._getEles();
14558+
_this2.eles.forEach(function (ele) {
1456714559
return ele.refresh && ele.refresh();
1456814560
});
14569-
_this3._calculateHeight(function () {
14570-
_this3.computeCurrentSticky(_this3.pos);
14561+
_this2._calculateHeight(function () {
14562+
_this2.computeCurrentSticky(_this2.pos);
1457114563
});
1457214564
});
1457314565
},
1457414566
computeCurrentSticky: function computeCurrentSticky(scrollY) {
14575-
console.log(scrollY);
1457614567
scrollY += this.offset;
1457714568
var positions = this.positions;
1457814569
var heights = this.heights;
@@ -14608,38 +14599,40 @@ var EVENT_DIFF_CHANGE = 'diff-change';
1460814599
this.diff = 0;
1460914600
},
1461014601
_updateFixedEleHeight: function _updateFixedEleHeight() {
14611-
var _this4 = this;
14602+
var _this3 = this;
1461214603
var query = this.createSelectorQuery();
1461314604
query.select('.cube-sticky-fixed').boundingClientRect(function (rect) {
14614-
_this4.fixedEleHeight = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
14605+
_this3.fixedEleHeight = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
1461514606
});
1461614607
query.exec();
1461714608
},
1461814609
_calculateHeight: function _calculateHeight(done) {
14619-
var _this5 = this;
14610+
var _this4 = this;
1462014611
var nodes = this._getEles();
1462114612
var rootTop = 0;
1462214613
this.positions = [];
1462314614
this.heights = [];
1462414615
this.rects = [];
14616+
// query.select('.cube-sticky').boundingClientRect((rootRect: any) => {
1462514617
var query = this.createSelectorQuery();
1462614618
query.select('.cube-sticky').boundingClientRect(function (rootRect) {
14627-
_this5.rootRect = rootRect;
14619+
_this4.rootRect = rootRect;
1462814620
rootTop = (rootRect === null || rootRect === void 0 ? void 0 : rootRect.top) || 0;
14629-
_this5.rootTop = rootTop;
14621+
_this4.rootTop = rootTop;
1463014622
});
1463114623
nodes.forEach(function (node, index) {
1463214624
query.in(node);
1463314625
query.selectAll('.cube-sticky-ele').boundingClientRect(function (rects) {
14626+
console.log(rects);
1463414627
(rects || []).forEach(function (rect) {
14635-
_this5.rects.push(rect);
14636-
_this5.positions[index] = ((rect === null || rect === void 0 ? void 0 : rect.top) || 0) - rootTop;
14637-
_this5.heights[index] = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
14628+
_this4.rects.push(rect);
14629+
_this4.positions[index] = ((rect === null || rect === void 0 ? void 0 : rect.top) || 0) - rootTop;
14630+
_this4.heights[index] = (rect === null || rect === void 0 ? void 0 : rect.height) || 0;
1463814631
});
1463914632
});
1464014633
});
1464114634
query.exec(function () {
14642-
_this5._updateFixedEleHeight();
14635+
_this4._updateFixedEleHeight();
1464314636
done && done();
1464414637
});
1464514638
}
@@ -41922,11 +41915,13 @@ __webpack_require__.g.currentInject.render = function (createElement, getCompone
4192241915
ishost: true,
4192341916
style: this.__getStyle("mpx-root-view host-_25af18f9", "", "", "")
4192441917
}, createElement(getComponent("mpx-view"), {
41918+
ref: this.__getRefVal('node', [[".", this.__getClass("cube-sticky-ele", "")]], "ref_fn_1"),
4192541919
style: this.__getStyle("cube-sticky-ele", "", "", this.eleHeightStyle)
4192641920
}, createElement(getComponent("mpx-view"), {
4192741921
style: this.__getStyle("cube-sticky-ele-content", "", "", this.eleContentStyle)
4192841922
}, this.__getSlot())));
4192941923
};
41924+
__webpack_require__.g.currentInject.getRefsData = function () {return [];};
4193041925
__webpack_require__.g.currentInject.injectOptions = {"disableMemo":true};
4193141926
/* styles */
4193241927

@@ -42893,7 +42888,7 @@ _ScrollView.displayName = 'MpxScrollView';
4289342888

4289442889
"use strict";
4289542890
__webpack_require__.r(__webpack_exports__);
42896-
/* harmony import */ var _mpxjs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(646);
42891+
/* harmony import */ var _mpxjs_core__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(1037);
4289742892

4289842893
(0,_mpxjs_core__WEBPACK_IMPORTED_MODULE_0__["default"])({
4289942894
options: {

‎example/app.mpx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,7 @@
5959
if (__mpx_mode__ === 'ios' || __mpx_mode__ === 'android') {
6060
pages = [
6161
"./pages/sticky/sticky-basic"
62+
// "./pages/popup/popup-content"
6263
]
6364
}
6465
module.exports = {

‎example/pages/popup/popup-content.mpx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,9 +15,9 @@
1515
</template>
1616

1717
<script>
18-
import { createComponent } from '@mpxjs/core'
18+
import { createPage } from '@mpxjs/core'
1919

20-
createComponent({
20+
createPage({
2121
options: {
2222
styleIsolation: 'shared'
2323
},

‎example/pages/sticky/sticky-basic.mpx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<view>
33
<view>{{ pos }}</view>
4-
<cube-sticky pos="{{pos}}" offset="{{ 60 }}">
4+
<cube-sticky pos="{{pos}}">
55
<scroll-view
66
scroll-y="{{ true }}"
77
bindscroll="onScroll"
@@ -33,9 +33,9 @@
3333
</template>
3434

3535
<script>
36-
import { createComponent } from '@mpxjs/core'
36+
import { createPage } from '@mpxjs/core'
3737

38-
createComponent({
38+
createPage({
3939
options: {
4040
styleIsolation: 'shared'
4141
},

‎packages/mpx-cube-ui/src/components/sticky/index.mpx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<view class="cube-sticky" wx:style="{{containerStyle}}">
2+
<view wx:ref class="cube-sticky" wx:style="{{containerStyle}}">
33
<slot></slot>
44
<view class="cube-sticky-fixed" wx:style="{{fixedEleStyle}}" wx:ref="fixedEle">
55
</view>

‎packages/mpx-cube-ui/src/components/sticky/sticky-ele/index.mpx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
<template>
22
<view
33
class="cube-sticky-ele"
4+
wx:ref
45
wx:style="{{ eleHeightStyle }}"
56
>
67
<view class="cube-sticky-ele-content" wx:style="{{ eleContentStyle }}">

‎packages/mpx-cube-ui/src/components/sticky/sticky.ts‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,6 @@ createComponent({
4141
fixedEleHeight: 0,
4242
positions: [] as number[],
4343
heights: [] as number[],
44-
_refreshTimer: null as unknown as ReturnType<typeof setTimeout>,
4544
eles: [] as StickyEleInstance[]
4645
},
4746
computed: {
@@ -109,7 +108,6 @@ createComponent({
109108
right: this.rootRect.right + 'px',
110109
width: this.rects[newIndex].width + 'px'
111110
})
112-
console.log(newEle.setStyle, this.rootRect, this.rects[newIndex])
113111
}
114112
},
115113
currentDiff(newVal: number) {
@@ -123,12 +121,6 @@ createComponent({
123121
}
124122
},
125123
methods: {
126-
_scheduleRefresh() {
127-
clearTimeout(this._refreshTimer)
128-
this._refreshTimer = setTimeout(() => {
129-
this.refresh()
130-
}, 0)
131-
},
132124
_getEles(): StickyEleInstance[] {
133125
const nodes = this.getRelationNodes(StickyEle) as unknown as StickyEleInstance[] | undefined
134126
return nodes || []
@@ -145,7 +137,6 @@ createComponent({
145137
})
146138
},
147139
computeCurrentSticky(scrollY: number) {
148-
console.log(scrollY)
149140
scrollY += this.offset
150141

151142
const positions = this.positions

0 commit comments

Comments
 (0)