feats

src/components/List/index.jsx

@@ -2,6 +2,7 @@ import React, { useEffect, useRef, useState, useImperativeHandle, useMemo } from
 import Spin3 from '@/components/Spin/Spin3';
 import { ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
+import { random } from '@/utils';
 
 export default React.forwardRef((props, ref) => {
   const {
@@ -23,7 +24,7 @@ export default React.forwardRef((props, ref) => {
   const pageRef = useRef({ current: 1 })
   const [hasMore, setHasMore] = useState(false)
 
-  const uqCls = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
+  const uqCls = useMemo(() => random('f'), [])
 
   // 滚动
   const handleScrollToLower = (e) => {

src/components/MasonryLayout/Item.jsx

@@ -8,7 +8,6 @@ import './style.less'
 export default (props) => {
   const { className, item, top, render, onRenderFinish } = props
 
-  // const uqClass = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
   const vid = item.__vid;
   
   const handleCallback = () => {

src/components/MasonryLayout/Waterfall.jsx

@@ -1,12 +1,13 @@
 import React, { useEffect, useMemo, useState } from 'react'
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components'
+import { random } from '@/utils';
 import { classNames, getRect } from './utils';
 import './style.less'
 
 export default (props) => {
   const { className, itemClassName, style, gutter = 0, list, render, ...leftProps } = props
-  const uqClass = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
+  const uqClass = useMemo(() => random('f'), [])
 
   const [styles, setStyles] = useState([])
 

src/components/MasonryLayout/hooks.js

@@ -1,4 +1,5 @@
 import { useRef, useState } from "react";
+import { random } from '@/utils';
 
 export function useList() {
   const [lst, setList] = useState([])
@@ -34,7 +35,7 @@ export function useRenderFunc(renderList, leftHeight, rightHeight, appendLeft, a
 
     // 每次把数组最上面的一个拿出来
     const item = renderList.current.shift()
-    item.__vid = `f-${Math.random().toString(36).substring(2)}`
+    item.__vid = random('f')
 
     // 优先放入低高度的栏里面
     if (leftHeight.current <= rightHeight.current) {

src/components/SlideView/index.jsx

@@ -2,6 +2,7 @@
 import React, { useEffect, useMemo, useRef, useState } from 'react'
 import Taro from '@tarojs/taro';
 import { ScrollView, View, Image, Text } from '@tarojs/components';
+import { random } from '@/utils';
 import deleteIcon from '@/assets/icons/landlord/delete.png';
 import './style.less'
 
@@ -12,7 +13,7 @@ export default (props) => {
   const contentHeightRef = useRef(0)
   const [actStyle, setActStyle]= useState()
 
-  const uqClass = useMemo(() => `f-${Math.random().toString(36).substring(2)}`, [])
+  const uqClass = useMemo(() => random('f'), [])
   const classes = [className, 'slideview-wrapper', uqClass].filter(Boolean).join(' ');
 
   const handleScrollLeft = () => {

src/components/Spin/style.less

@@ -163,3 +163,30 @@
     }
   }
 }
+
+
+.wx_loading_view{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+
+  &__hide {
+    height: 0 !important;
+    display: none;
+  }
+
+  &__animated&__hide {
+    display: flex;
+  }
+}
+
+.loading {
+    color:rgba(255, 255, 255, 0.9);
+    font-size:17px;
+    text-align:center;
+}
+
+.loading_view_translation {
+  transition: height .2s .3s ease;
+}

src/pages/index/components/Card/index.jsx

@@ -2,7 +2,7 @@
 import { useMemo } from 'react'
 import Taro from '@tarojs/taro'
 import useSave from "@/utils/hooks/useSave"
-import { compressImage } from '@/utils'
+import { compressImage, random } from '@/utils'
 import msTip from '@/assets/icons/housemantj/foodtip.png'
 import mjTip from '@/assets/icons/housemantj/mjtip.png'
 import location from '@/assets/icons/housemantj/location.png'
@@ -14,9 +14,7 @@ export default (props) => {
 
   const { className, item, style, onImageLoad } = props
   
-  const uqClass = useMemo(() => {
-    return `f-${Math.random().toString(36).substring(2)}`
-  }, [])
+  const uqClass = useMemo(() => random('f'), [])
 
   const cls = useMemo(() => [className, 'contentCard', uqClass].filter(Boolean).join(' '), [className, uqClass])
 

src/pages/index/index.config.js

@@ -3,6 +3,7 @@ export default {
   navigationStyle: 'custom',
   styleIsolation: 'shared',
   enableShareAppMessage: true,
+  disableScroll: false,
   usingComponents: {
     "mp-tabbar": "weui-miniprogram/tabbar/tabbar",
     "mp-tabs": "../../../components/tabs/index",

src/pages/index/tabs/Recommend.jsx

@@ -1,5 +1,5 @@
 import Taro, { useDidShow } from '@tarojs/taro'
-import { React, useState, useEffect, useRef } from 'react'
+import { React, useState, useEffect, useRef, useMemo } from 'react'
 import iconsearch from '@/assets/icons/housemantj/search.png'
 import locationimg from '@/assets/icons/housemantj/location.png'
 import Tip from '@/components/tip'
@@ -8,6 +8,7 @@ import NoData from '@/components/NoData'
 import MasonryLayout from '@/components/MasonryLayout';
 import Waterfall from '@/components/MasonryLayout/Waterfall';
 import { getIndexType, getResourceList } from '@/services/home'
+import { random } from '@/utils'
 import Card from '../components/Card'
 import './less/Recommend.less'
 
@@ -16,6 +17,7 @@ const listStyle = { height: '100%' }
 export default (props) => {
   const { router, person, location } = props
 
+  const listClass = useMemo(() => random('f'), [])
   const [activeTab, setActiveTab] = useState(0)
   const [typeList, setTypeList] = useState([])
   const listRef = useRef()
@@ -50,7 +52,6 @@ export default (props) => {
       if (listRef.current?.context) {
         Taro.nextTick(() => {
           const t = setTimeout(() => {
-            console.log('------------>', listRef.current.context.scrollTo)
             listRef.current.context.scrollTo({ top: 0 })
             clearTimeout(t)
           }, 500)
@@ -61,8 +62,6 @@ export default (props) => {
     setListData({ list: value, rfTimes: rfTimes.current })
   }
 
-
-
   useEffect(() => {
     //查询分类标签表
     getIndexType({ pageSize: 20 }).then((res) => {
@@ -106,7 +105,7 @@ export default (props) => {
           </mp-tabs>
         </scroll-view>
       </view>
-      <view style={{ flex:'auto' }}>
+      <view className={listClass} style={{ flex:'auto', height: '100%', overflow: 'hidden' }}>
         <List
           ref={listRef}
           style={listStyle}

src/utils/hooks/useRouter.js

@@ -1,5 +1,5 @@
 import Taro, { useRouter } from '@tarojs/taro'
-import { parseQueryString } from '@/utils'
+import { parseQueryString, random } from '@/utils'
 import { useModel } from '@/store'
 import { useEffect, useRef, useState } from 'react'
 import { getQrcode } from '@/services/miniapp'
@@ -32,7 +32,7 @@ export default () => {
           ...qrParams,
           parseQRFinished: true,
         }
-        setToggleRefresh(Math.random().toString())
+        setToggleRefresh(random())
       } else {
         getQrcode(scene).then((res) => {
           const qrParams = parseQueryString(res.scene) || {}
@@ -41,7 +41,7 @@ export default () => {
             ...qrParams,
             parseQRFinished: true,
           }
-          setToggleRefresh(Math.random().toString())
+          setToggleRefresh(random())
         })
       }
     }

src/utils/index.js

@@ -45,6 +45,17 @@ export function getQueryString(params) {
   return arr.filter(Boolean).join('&')
 }
 
+/**
+ * 随机串
+ * @param {*} prefix 
+ * @returns 
+ */
+export function random(prefix) {
+  const s = Math.random().toString(36).substring(2)
+
+  return prefix ? `${prefix}-${s}` : s
+}
+
 /**
  * 压缩图片
  * @param {*} url