feats

src/components/List/index.jsx

@@ -1,8 +1,8 @@
-import React, {  useEffect, useRef, useState } from 'react';
+import React, {  useEffect, useRef, useState, useImperativeHandle } from 'react';
 import { ScrollView } from '@tarojs/components';
 import Taro from '@tarojs/taro';
 
-export default (props) => {
+export default React.forwardRef((props, ref) => {
   const {
     render,
     request,
@@ -11,9 +11,11 @@ export default (props) => {
     onError,
     onDataChange,
     noData,
+    className,
     ...leftProps
   } = props
 
+  const contextRef = useRef()
   const loadingRef = useRef(false)
   const [payload, setPayload] = useState(params)
   const [list, setList] = useState([])
@@ -75,11 +77,27 @@ export default (props) => {
     fetchRef.current(payload)
   }, [payload, request])
 
+  useEffect(() => {
+    Taro.nextTick(() => {
+      Taro.createSelectorQuery().select('.list-view').node(function(res){
+        contextRef.current = res.node
+      }).exec()
+    })
+  }, [])
+
+  // https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/ScrollViewContext.html
+  // ScrollViewContext 透传给父组件
+  useImperativeHandle(ref, () => ({
+    context: contextRef.current,
+  }))
+
   return (
     <ScrollView
       scrollY
+      enhanced
       onScrollToLower={handleScrollToLower}
       {...leftProps}
+      className={`${className} list-view`}
     >
       {!render
         ? props.children
@@ -91,4 +109,4 @@ export default (props) => {
       
     </ScrollView>
   )
-}
+})

src/pages/index/tabs/Recommend.jsx

@@ -1,5 +1,5 @@
 import Taro from '@tarojs/taro'
-import { React, useState, useEffect } from 'react'
+import { React, useState, useEffect, useRef } from 'react'
 import iconsearch from '@/assets/icons/housemantj/search.png'
 import locationimg from '@/assets/icons/housemantj/location.png'
 import Tip from '@/components/tip'
@@ -12,9 +12,10 @@ import './less/Recommend.less'
 
 export default (props) => {
   const { router, person, location } = props
+
   const [activeTab, setActiveTab] = useState(0)
   const [typeList, setTypeList] = useState([])
-
+  const listRef = useRef()
 
   const [queryParams, setQueryParams] = useState({ location: location, pageNum: 1, pageSize: 10, typeId: '' })
 
@@ -34,6 +35,10 @@ export default (props) => {
     if (index == 0) {
       setQueryParams({ location: location, pageNum: 1, pageSize: 10, typeId: '' })
     }
+
+    if (listRef.current?.context) {
+      listRef.current.context.scrollTo({ top: 0 })
+    }
   }
   useEffect(() => {
     //查询分类标签表
@@ -61,7 +66,7 @@ export default (props) => {
           <view className='city'>南京</view>
           <view className='line' />
         </view>
-        <scroll-view scroll-x='true' scroll-view='true' bindscrolltoupper='upper' bindscrolltolower='lower' bindscroll='scroll'>
+        <scroll-view scrollX>
           <mp-tabs
             tabClass='tabs-Unselected'
             swiperClass='tabs-swiper'
@@ -75,6 +80,7 @@ export default (props) => {
         </scroll-view>
       </view>
       <List
+        ref={listRef}
         style={{ height: 'calc(100% - 145px)' }}
         request={getResourceList}
         params={queryParams}