|
@@ -23,57 +23,72 @@ export default (props) => {
|
23
|
23
|
const { list, rfTimes: refresh } = listData
|
24
|
24
|
|
25
|
25
|
// 用来绘制页面的数据
|
26
|
|
- const renderListRef = useRef([])
|
|
26
|
+ // const renderListRef = useRef([])
|
27
|
27
|
|
28
|
28
|
const lastList = usePrevious(list)
|
29
|
|
- const lastRf = usePrevious(refresh)
|
|
29
|
+ // const lastRf = usePrevious(refresh)
|
30
|
30
|
|
31
|
31
|
|
32
|
32
|
// 记录左右2栏的数据及高度
|
33
|
|
- const leftHeight = useRef(0)
|
34
|
|
- const rightHeight = useRef(0)
|
35
|
|
- const [leftList, appendLeft, setLeftList] = useColumn()
|
36
|
|
- const [rightList, appendRight, setRightList] = useColumn()
|
|
33
|
+ // const leftHeight = useRef(0)
|
|
34
|
+ // const rightHeight = useRef(0)
|
|
35
|
+ // const [leftList, appendLeft, setLeftList] = useColumn()
|
|
36
|
+ // const [rightList, appendRight, setRightList] = useColumn()
|
|
37
|
+ const [leftList, setLeftList] = useState([])
|
|
38
|
+ const [rightList, setRightList] = useState([])
|
37
|
39
|
|
38
|
40
|
// 渲染逻辑
|
39
|
|
- const forceRender = useRenderFunc(renderListRef, leftHeight, rightHeight, appendLeft, appendRight)
|
|
41
|
+ // const forceRender = useRenderFunc(renderListRef, leftHeight, rightHeight, appendLeft, appendRight)
|
40
|
42
|
|
41
|
43
|
// 每个元素渲染完成, 会拿到当前栏的高度
|
42
|
44
|
const handleRenderFinish = (direct) => (height) => {
|
43
|
|
- if (direct === 'left') {
|
44
|
|
- leftHeight.current = height
|
45
|
|
- } else {
|
46
|
|
- rightHeight.current = height
|
47
|
|
- }
|
48
|
|
-
|
49
|
|
- //
|
50
|
|
- forceRender.current()
|
|
45
|
+ // if (direct === 'left') {
|
|
46
|
+ // leftHeight.current = height
|
|
47
|
+ // } else {
|
|
48
|
+ // rightHeight.current = height
|
|
49
|
+ // }
|
|
50
|
+
|
|
51
|
+ // //
|
|
52
|
+ // forceRender.current()
|
51
|
53
|
}
|
52
|
54
|
|
53
|
|
- console.debug('------leftHeight------->', leftHeight.current)
|
54
|
|
- console.debug('------rightHeight------->', rightHeight.current)
|
55
|
|
- console.debug('------renderListRef------->', renderListRef.current)
|
56
|
|
- console.debug('------list------->', list)
|
|
55
|
+ // console.debug('------leftHeight------->', leftHeight.current)
|
|
56
|
+ // console.debug('------rightHeight------->', rightHeight.current)
|
|
57
|
+ // console.debug('------renderListRef------->', renderListRef.current)
|
|
58
|
+ // console.debug('------list------->', list)
|
57
|
59
|
|
58
|
60
|
useEffect(() => {
|
59
|
61
|
if (lastList && lastList === list) return;
|
60
|
62
|
|
61
|
|
- // 新数据源 = 首次进入 或者 切换数据源
|
62
|
|
- const isNew = (!lastList?.length && list.length) || (lastRf !== refresh)
|
63
|
|
-
|
64
|
|
- if (!isNew) {
|
65
|
|
- // 非新数据源, list 变更那就说明是执行了上拉加载
|
66
|
|
- // 于是, 只继续绘制变更的那部分
|
67
|
|
- renderListRef.current = list.slice(lastList.length)
|
68
|
|
- } else {
|
69
|
|
- leftHeight.current = 0
|
70
|
|
- rightHeight.current = 0
|
71
|
|
- setLeftList([])
|
72
|
|
- setRightList([])
|
73
|
|
- renderListRef.current = list ? list.slice() : []
|
74
|
|
- }
|
75
|
|
-
|
76
|
|
- forceRender.current()
|
|
63
|
+ // // 新数据源 = 首次进入 或者 切换数据源
|
|
64
|
+ // const isNew = (!lastList?.length && list.length) || (lastRf !== refresh)
|
|
65
|
+
|
|
66
|
+ // if (!isNew) {
|
|
67
|
+ // // 非新数据源, list 变更那就说明是执行了上拉加载
|
|
68
|
+ // // 于是, 只继续绘制变更的那部分
|
|
69
|
+ // renderListRef.current = list.slice(lastList.length)
|
|
70
|
+ // } else {
|
|
71
|
+ // leftHeight.current = 0
|
|
72
|
+ // rightHeight.current = 0
|
|
73
|
+ // setLeftList([])
|
|
74
|
+ // setRightList([])
|
|
75
|
+ // renderListRef.current = list ? list.slice() : []
|
|
76
|
+ // }
|
|
77
|
+
|
|
78
|
+ // forceRender.current()
|
|
79
|
+
|
|
80
|
+ const lst1 = []
|
|
81
|
+ const lst2 = []
|
|
82
|
+ list.map((item, index) => {
|
|
83
|
+ if (index % 2 === 0) {
|
|
84
|
+ lst1.push(item)
|
|
85
|
+ } else {
|
|
86
|
+ lst2.push(item)
|
|
87
|
+ }
|
|
88
|
+ })
|
|
89
|
+
|
|
90
|
+ setLeftList(lst1)
|
|
91
|
+ setRightList(lst2)
|
77
|
92
|
}, [lastList, list])
|
78
|
93
|
|
79
|
94
|
return (
|