feats

src/components/List/index.jsx

@@ -3,6 +3,7 @@ import SpinBox from "@/components/Spin/SpinBox";
 
 import { ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
+import usePrevious from '@/utils/hooks/usePrevious';
 
 export default React.forwardRef((props, ref) => {
   const {
@@ -23,6 +24,7 @@ export default React.forwardRef((props, ref) => {
   const [list, setList] = useState([])
   const pageRef = useRef({ current: 1 })
   const [hasMore, setHasMore] = useState(false)
+  const preParams = usePrevious(params)
 
   // 滚动
   const handleScrollToLower = (e) => {
@@ -47,7 +49,7 @@ export default React.forwardRef((props, ref) => {
       setHasMore(pageInfo.current < pageInfo.pages)
 
       if (onDataChange) {
-        onDataChange(lst)
+        onDataChange(lst, { paramsChanged: preParams !== params })
       }
 
       pageRef.current = pageInfo
@@ -66,7 +68,6 @@ export default React.forwardRef((props, ref) => {
   const fetchRef = useRef()
   fetchRef.current = fetchList
 
-  
   useEffect(() => {
     pageRef.current.current = 1
     setHasMore(false)

src/components/MasonryLayout/Column.jsx

@@ -0,0 +1,36 @@
+import React, { useEffect, useRef } from 'react'
+import { View } from '@tarojs/components'
+import Item from './Item'
+import { classNames } from './utils'
+
+export default (props) => {
+  const { className, list = [], render, onRenderFinish, ...leftProps } = props
+
+  const heightRef = useRef(0)
+
+  const handleRenderFinish = (item, index) => (rect) => {
+    const { height } = rect;
+    item.__height = height
+    
+    if (index === 0) {
+      heightRef.current = height
+    } else {
+      heightRef.current += height
+    }
+
+    onRenderFinish(heightRef.current)
+  }
+
+  return (
+    <View {...leftProps} className={classNames(className, 'masonry-column')}>
+      {
+        list.map((item, index) => {
+
+          return (
+            <Item key={item.__vid} item={item} render={render} onRenderFinish={handleRenderFinish(item, index)} />
+          )
+        })
+      }
+    </View>
+  )
+}

src/components/MasonryLayout/Item.jsx

@@ -1,49 +1,23 @@
 
-import React, { useMemo, useEffect } from 'react'
+import React, { useMemo } from 'react'
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components'
-import { classNames, getRect } from './utils';
+import { classNames } from './utils';
 import './style.less'
 
 export default (props) => {
-  const { className, item, render, onRenderFinish } = props
+  const { className, item, top, render, onRenderFinish } = props
 
+  // const uqClass = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
   const vid = item.__vid;
   
-  useEffect(() => {
-    Taro.nextTick(() => {
-      const calcHeight = () => {
-        getRect(`.${vid}`).then((res) => {
-          if (!res) {
-            // 找不到 node , 则一直重复查询
-            const t = setTimeout(() => {
-              clearTimeout(t)
-              calcHeight()
-            }, 100)
-          } else {
-            const t = setTimeout(() => {
-              if (Array.isArray(res)) {
-                onRenderFinish(res[0])
-              } else {
-                onRenderFinish(res)
-              }
-              clearTimeout(t)
-            }, 100)
-          }
-        })
-      }
-  
-      calcHeight()
-    })
-  })
-
+  const handleCallback = () => {
+    Taro.createSelectorQuery().select(`.${vid}`).boundingClientRect(rect => onRenderFinish(rect)).exec()
+  }
 
   return (
-    <View
-      key={vid}
-      className={classNames(className, 'masonry-item', vid)}
-    >
-      {render(item)}
+    <View className={classNames(className, 'masonry-item', vid)}>
+      {render(item, handleCallback)}
     </View>
   )
 }

src/components/MasonryLayout/index.jsx

@@ -1,75 +1,107 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
-import Item from './Item';
+import usePrevious from '@/utils/hooks/usePrevious';
+import Column from './Column';
 import { useList } from './hooks';
 import { classNames, getRect } from './utils';
 
 import './style.less'
 
+/**
+ * 核心原理, 左右2栏，一个个放元素，同时记录高度，优先放入低高度区域
+ * 元素高度获取，主要是通过图片的 onLoad 来确保加载完成
+ * 
+ * 复杂度, 多数据公用 list,
+ * 需要区分是否更换数据源，是否未更换数据源，只是新增了数据
+ */
+
 export default (props) => {
-  const { className, itemClassName, style, gutter = 0, list, render, ...leftProps } = props
+  const { className, listData, itemKey, render } = props
+
+  // rfTimes 用来区分是否更换数据源
+  const { list, rfTimes: refresh } = listData
+
+  // 用来绘制页面的数据
+  const renderListRef = useRef([])
 
-  const splitStyle = { width: `${gutter}rpx` }
+  const lastList = usePrevious(list)
+  const lastRf = usePrevious(refresh)
 
-  const leftBottom = useRef(0)
-  const rightBottom = useRef(0)
+  // 记录左右2栏的数据及高度
+  const leftHeight = useRef(0)
+  const rightHeight = useRef(0)
   const [leftList, leftRef, setLeftList] = useList()
   const [rightList, rightRef, setRightList] = useList()
-  const [cursor, setCursor] = useState(0)
 
-  const listRef = useRef([])
-  listRef.current = list
-
-  const handleRenderFinish = (direct) => (rect) => {
-    const { bottom } = rect
+  // 用来强制更新组件
+  const [cursor, setCursor] = useState(-1)
 
+  // 每个元素渲染完成, 会拿到当前栏的高度
+  const handleRenderFinish = (direct) => (height) => {
     if (direct === 'left') {
-      leftBottom.current = bottom
+      leftHeight.current = height
     } else {
-      rightBottom.current = bottom
+      rightHeight.current = height
     }
 
+    // 触发强制渲染
     setCursor(cursor + 1)
   }
     
   useEffect(() => {
-    setCursor(0)
-    setLeftList([])
-    setRightList([])
-    listRef.current = list ? list.slice() : []
+    // 新数据源 = 首次进入 或者 切换数据源
+    const isNew = (!lastList?.length && list.length) || (lastRf !== refresh)
+    
+    if (!isNew) {
+      // 非新数据源, list 变更那就说明是执行了上拉加载
+      const addedList = []
+      for (let item of list) {
+        const found = lastList.filter(x => x[itemKey] === item[itemKey])[0]
+        if (!found) {
+          addedList.push(item)
+        }
+      }
+      
+      // 于是, 只继续绘制变更的那部分
+      renderListRef.current = addedList
+      setCursor(-2)
+    } else {
+      setCursor(0)
+      setLeftList([])
+      setRightList([])
+      renderListRef.current = list ? list.slice() : []
+      leftHeight.current = 0
+      rightHeight.current = 0
+  
+      if (renderListRef.current.length) {
+        setCursor(0)
+      } else {
+        setCursor(-1)
+      }
+    }
   }, [list])
 
   useEffect(() => {
-    const len = !list ? 0 : list.length;
-    if (leftRef.current.length + rightRef.current.length >= len) return;
+    // 如果当前渲染数据为空
+    if (!renderListRef.current.length) return;
 
-    const item = listRef.current.shift()
+    // 每次把数组最上面的一个拿出来
+    const item = renderListRef.current.shift()
     item.__vid = `f-${Math.random().toString(36).substring(2)}`
 
-    if (leftBottom.current <= rightBottom.current) {
+    // 优先放入低高度的栏里面
+    if (leftHeight.current <= rightHeight.current) {
       setLeftList([...leftRef.current, item])
     } else {
       setRightList([...rightRef.current, item])
     }
-  }, [cursor, list])
+  }, [cursor])
 
   return (
-    <View
-      style={style}
-      className={classNames(className, 'masonry-layout')}
-    >
-      <View className='masonry-column'>
-        {
-          leftList.map(item => <Item key={item.__vid} className={itemClassName} item={item} render={render} onRenderFinish={handleRenderFinish('left')} />)
-        }
-      </View>
-      <View className='masonry-split' style={splitStyle} />
-      <View className='masonry-column'>
-        {
-          rightList.map(item => <Item key={item.__vid} className={itemClassName} item={item} render={render} onRenderFinish={handleRenderFinish('right')} />)
-        }
-      </View>
+    <View className={classNames(className, 'masonry-layout')}>
+      <Column list={leftList} render={render} onRenderFinish={handleRenderFinish('left')} />
+      <Column list={rightList} render={render} onRenderFinish={handleRenderFinish('right')} />
     </View>
   )
 }

src/components/MasonryLayout/style.less

@@ -6,15 +6,12 @@
 
   .masonry-column {
     flex: 1;
+    overflow: hidden;
+    position: relative;
   }
   
-  .masonry-split {
-    flex: none;
-  }
-
   .masonry-item {
     width: 100%;
-    overflow-x: hidden;
   }
 }
 

src/pages/index/components/Card/style.less

@@ -45,7 +45,7 @@
       display: flex;
     
       .cCleft{
-        flex: 1;
+        flex: 3;
         position: relative;
         padding:40px 0 30px 0;
         .cCicon{
@@ -62,7 +62,7 @@
         }
       }
       .cCright{
-        flex: 1;
+        flex: 2;
         position: relative;
         padding:40px 0 30px 0;
         .price{          

src/pages/index/tabs/Recommend.jsx

@@ -22,9 +22,12 @@ export default (props) => {
   const listRef = useRef()
 
   const [queryParams, setQueryParams] = useState({ location, pageNum: 1, pageSize: 10, typeId: '' })
+  const rfTimes = useRef(0)
 
   // 获取资源表信息
-  const [alllist, setAllList] = useState([])
+  // const [alllist, setAllList] = useState([])
+  const [listData, setListData] = useState({ list: [], rfTimes: 0 })
+
   //分类标签
   const tabs = [{ title: '附近' }].concat(typeList.map(x => ({ ...x, title: x.typeName })))
   //切换上面的标签
@@ -44,6 +47,14 @@ export default (props) => {
     }
   }
 
+  const handleDataChange = (value, e) => {
+    if (e.paramsChanged) {
+      rfTimes.current += 1
+    }
+
+    setListData({ list: value, rfTimes: rfTimes.current })
+  }
+
   useEffect(() => {
     //查询分类标签表
     getIndexType({ pageSize: 20 }).then((res) => {
@@ -55,19 +66,17 @@ export default (props) => {
     // 用绝对路径
     Taro.navigateTo({ url: '/pages/search/search' });
   }
-  // 联动收藏
-  const likeLook = () => {
-    getResourceList().then(e => {
-      setAllList(e.records)
-    })
-
-  }
-
-  useDidShow(() => {
-    likeLook()
-  })
+  // // 联动收藏
+  // const likeLook = () => {
+  //   getResourceList().then(e => {
+  //     setAllList(e.records)
+  //   })
 
+  // }
 
+  // useDidShow(() => {
+  //   likeLook()
+  // })
 
   return (
     // <view style={{ height: '100%', overflow: 'hidden',display:'flex',flexDirection:'column' }}>
@@ -103,11 +112,12 @@ export default (props) => {
           style={listStyle}
           request={getResourceList}
           params={queryParams}
-          onDataChange={setAllList}
+          onDataChange={handleDataChange}
         >
           <view style={{ padding: '30rpx 15rpx' }}>
-            <Waterfall
-              list={alllist}
+            <MasonryLayout
+              itemKey='resourceNo'
+              listData={listData}
               render={(item, callback) => <Card item={item} onImageLoad={callback} />}
             />
           </view>