Skip to content

Commit 364f397

Browse files
authored
Merge pull request #17 from landn172/master
fix(recycle-view): 修复forceUpdate时计算slot-before,slot-after无效 #16
2 parents c0b95c5 + 6104193 commit 364f397

File tree

2 files changed

+50
-16
lines changed

2 files changed

+50
-16
lines changed

src/recycle-view.js

Lines changed: 20 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -550,20 +550,26 @@ Component({
550550
// 重新渲染事件发生
551551
let beforeReady = false
552552
let afterReady = false
553-
this.createSelectorQuery().select('.slot-before').boundingClientRect((rect) => {
554-
beforeSlotHeight = rect.height
555-
beforeReady = true
556-
if (afterReady) {
557-
if (newCb) { newCb() }
558-
}
559-
}).exec()
560-
this.createSelectorQuery().select('.slot-after').boundingClientRect((rect) => {
561-
afterSlotHeight = rect.height
562-
afterReady = true
563-
if (beforeReady) {
564-
if (newCb) { newCb() }
565-
}
566-
}).exec()
553+
// fix:#16 确保获取slot节点实际高度
554+
this.setData({
555+
hasBeforeSlotHeight: false,
556+
hasAfterSlotHeight: false,
557+
}, () => {
558+
this.createSelectorQuery().select('.slot-before').boundingClientRect((rect) => {
559+
beforeSlotHeight = rect.height
560+
beforeReady = true
561+
if (afterReady) {
562+
if (newCb) { newCb() }
563+
}
564+
}).exec()
565+
this.createSelectorQuery().select('.slot-after').boundingClientRect((rect) => {
566+
afterSlotHeight = rect.height
567+
afterReady = true
568+
if (beforeReady) {
569+
if (newCb) { newCb() }
570+
}
571+
}).exec()
572+
})
567573
},
568574
_setInnerBeforeAndAfterHeight(obj) {
569575
if (typeof obj.beforeHeight !== 'undefined') {

src/utils/recycle-context.js

Lines changed: 30 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -337,8 +337,9 @@ RecycleContext.prototype._recalculateSize = function (list) {
337337
let line = 0
338338
let column = 0
339339
const sizeArray = []
340+
const listLen = list.length
340341
// 把整个页面拆分成200*200的很多个方格, 判断每个数据落在哪个方格上
341-
for (let i = 0; i < list.length; i++) {
342+
for (let i = 0; i < listLen; i++) {
342343
if (typeof list[i].__index__ === 'undefined') {
343344
list[i].__index__ = i
344345
}
@@ -358,13 +359,26 @@ RecycleContext.prototype._recalculateSize = function (list) {
358359
// 判断数据落到哪个方格上
359360
// 超过了宽度, 移动到下一行, 再根据高度判断是否需要移动到下一个方格
360361
if (offsetLeft + itemSize.width > compData.width) {
362+
column = 0
361363
offsetLeft = itemSize.width
362364
offsetTop += sizeArray[sizeArray.length - 2].height // 加上最后一个数据的高度
363365
// 根据高度判断是否需要移动到下一个方格
364366
if (offsetTop >= RECT_SIZE * (line + 1)) {
367+
// fix: 当区块比较大时,会缺失块区域信息
368+
const lastIdx = i - 1
369+
const lastLine = line
370+
365371
line += parseInt((offsetTop - RECT_SIZE * line) / RECT_SIZE, 10)
372+
373+
for (let idx = lastLine; idx < line; idx++) {
374+
const key = `${idx}.${column}`
375+
if (!sizeMap[key]) {
376+
sizeMap[key] = []
377+
}
378+
sizeMap[key].push(lastIdx)
379+
}
366380
}
367-
column = 0
381+
368382
// 新起一行的元素, beforeHeight是前一个元素的beforeHeight和height相加
369383
if (i === 0) {
370384
itemSize.beforeHeight = 0
@@ -389,6 +403,20 @@ RecycleContext.prototype._recalculateSize = function (list) {
389403
(sizeMap[key] = [])
390404
}
391405
sizeMap[key].push(i)
406+
407+
// fix: 当区块比较大时,会缺失块区域信息
408+
if (listLen - 1 === i && itemSize.height > RECT_SIZE) {
409+
const lastIdx = line
410+
offsetTop += itemSize.height
411+
line += parseInt((offsetTop - RECT_SIZE * line) / RECT_SIZE, 10)
412+
for (let idx = lastIdx; idx <= line; idx++) {
413+
const key = `${idx}.${column}`
414+
if (!sizeMap[key]) {
415+
sizeMap[key] = []
416+
}
417+
sizeMap[key].push(i)
418+
}
419+
}
392420
}
393421
// console.log('sizeMap', sizeMap)
394422
const obj = {

0 commit comments

Comments
 (0)