Merge branch 'dev' of http://git.ycjcjy.com/shigongli/miniapp-v2 into dev

project.config.json

@@ -2,7 +2,7 @@
   "miniprogramRoot": "./dist",
   "projectname": "miniapp",
   "description": "十公里",
-  "appid": "wx835627a9b9b3932a",
+  "appid": "wx06a7372d48d56843",
   "setting": {
     "urlCheck": true,
     "es6": false,

src/components/MasonryLayout/Item.jsx

@@ -12,7 +12,22 @@ export default (props) => {
   const vid = item.__vid;
   
   const handleCallback = () => {
-    Taro.createSelectorQuery().select(`.${vid}`).boundingClientRect(rect => onRenderFinish(rect)).exec()
+    let t = null;
+    const getRect = () => {
+      if (t) {
+        clearTimeout(t)
+        t = null;
+      }
+      Taro.createSelectorQuery().select(`.${vid}`).boundingClientRect(rect => {
+        if (rect && rect.height) {
+          onRenderFinish(rect)
+        } else {
+          t = setTimeout(() => getRect(), 100)
+        }
+      }).exec()
+    }
+
+    getRect()
   }
 
   return (

src/components/MasonryLayout/hooks.js

@@ -7,3 +7,45 @@ export function useList() {
 
   return [lst, lstRef, setList]
 }
+
+export function useColumn() {
+  // 数据有2份, 以 ref 中的为准
+  // setList 只是用来触发页面渲染
+  const [list, setList] = useState([])
+  const listRef = useRef(list)
+
+  const appendList = (item) => {
+    listRef.current = listRef.current.concat(item)
+    setList(listRef.current.slice())
+  }
+
+  const fillList = (lst) => {
+    listRef.current = lst
+    setList(lst)
+  }
+
+  return [listRef.current, appendList, fillList]
+}
+
+export function useRenderFunc(renderList, leftHeight, rightHeight, appendLeft, appendRight) {
+  const func = () => {
+      // 如果当前渲染数据为空
+    if (!renderList.current.length) return;
+
+    // 每次把数组最上面的一个拿出来
+    const item = renderList.current.shift()
+    item.__vid = `f-${Math.random().toString(36).substring(2)}`
+
+    // 优先放入低高度的栏里面
+    if (leftHeight.current <= rightHeight.current) {
+      appendLeft(item)
+    } else {
+      appendRight(item)
+    }
+  }
+
+  const renderRef = useRef();
+  renderRef.current = func;
+
+  return renderRef;
+}

src/components/MasonryLayout/index.jsx

@@ -3,7 +3,7 @@ import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
 import usePrevious from '@/utils/hooks/usePrevious';
 import Column from './Column';
-import { useList } from './hooks';
+import { useColumn, useRenderFunc } from './hooks';
 import { classNames, getRect } from './utils';
 
 import './style.less'
@@ -17,7 +17,7 @@ import './style.less'
  */
 
 export default (props) => {
-  const { className, listData, itemKey, render } = props
+  const { className, listData, render } = props
 
   // rfTimes 用来区分是否更换数据源
   const { list, rfTimes: refresh } = listData
@@ -28,14 +28,15 @@ export default (props) => {
   const lastList = usePrevious(list)
   const lastRf = usePrevious(refresh)
 
+
   // 记录左右2栏的数据及高度
   const leftHeight = useRef(0)
   const rightHeight = useRef(0)
-  const [leftList, leftRef, setLeftList] = useList()
-  const [rightList, rightRef, setRightList] = useList()
-
-  // 用来强制更新组件
-  const [cursor, setCursor] = useState(-1)
+  const [leftList, appendLeft, setLeftList] = useColumn()
+  const [rightList, appendRight, setRightList] = useColumn()
+  
+  // 渲染逻辑
+  const forceRender = useRenderFunc(renderListRef, leftHeight, rightHeight, appendLeft, appendRight)
 
   // 每个元素渲染完成, 会拿到当前栏的高度
   const handleRenderFinish = (direct) => (height) => {
@@ -45,58 +46,35 @@ export default (props) => {
       rightHeight.current = height
     }
 
-    // 触发强制渲染
-    setCursor(cursor + 1)
+    //
+    forceRender.current()
   }
-    
+  
+  console.debug('------leftHeight------->', leftHeight.current)
+  console.debug('------rightHeight------->', rightHeight.current)
+  console.debug('------renderListRef------->', renderListRef.current)
+  console.debug('------list------->', list)
+
   useEffect(() => {
+    if (lastList && lastList === list) return;
+
     // 新数据源 = 首次进入 或者 切换数据源
     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)
-        }
-      }
-      
+      // 非新数据源, list 变更那就说明是执行了上拉加载      
       // 于是, 只继续绘制变更的那部分
-      renderListRef.current = addedList
-      setCursor(-2)
+      renderListRef.current = list.slice(lastList.length)
     } else {
-      setCursor(0)
+      leftHeight.current = 0
+      rightHeight.current = 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(() => {
-    // 如果当前渲染数据为空
-    if (!renderListRef.current.length) return;
-
-    // 每次把数组最上面的一个拿出来
-    const item = renderListRef.current.shift()
-    item.__vid = `f-${Math.random().toString(36).substring(2)}`
 
-    // 优先放入低高度的栏里面
-    if (leftHeight.current <= rightHeight.current) {
-      setLeftList([...leftRef.current, item])
-    } else {
-      setRightList([...rightRef.current, item])
-    }
-  }, [cursor])
+    forceRender.current()
+  }, [lastList, list])
 
   return (
     <View className={classNames(className, 'masonry-layout')}>

src/pages/RoomOrder/index.jsx

@@ -41,12 +41,12 @@ export default withLayout((props) => {
           return;
         }
       }
-      // Taro.reLaunch({
-      //   url: `/pages/index/index?tab=1&roomId=${roomId}`
-      // })
       personSubmit(roomOrderId, formData).then(a => {
-        Taro.navigateBack({
-          delta: 1
+        // Taro.navigateBack({
+        //   delta: 1
+        // })
+        Taro.reLaunch({
+          url: `/pages/index/index?tab=1&roomId=${roomId}`
         })
       })
     })

src/pages/index/tabs/Guide.jsx

@@ -40,8 +40,6 @@ export default (props) => {
   const parkingGps = taRoomContent.parkingLocation || []
   const roomGps = taRoomContent.location || []
 
-
-
   const goContent = () => {
     if (roomOrderId) {
       goToRoomForm(roomOrderId).then((res) => {