张延森 3 years ago
parent
commit
c729f5d4b3
2 changed files with 30 additions and 6 deletions
  1. 21
    3
      src/components/List/index.jsx
  2. 9
    3
      src/pages/index/tabs/Recommend.jsx

+ 21
- 3
src/components/List/index.jsx View File

@@ -1,8 +1,8 @@
1
-import React, {  useEffect, useRef, useState } from 'react';
1
+import React, {  useEffect, useRef, useState, useImperativeHandle } from 'react';
2 2
 import { ScrollView } from '@tarojs/components';
3 3
 import Taro from '@tarojs/taro';
4 4
 
5
-export default (props) => {
5
+export default React.forwardRef((props, ref) => {
6 6
   const {
7 7
     render,
8 8
     request,
@@ -11,9 +11,11 @@ export default (props) => {
11 11
     onError,
12 12
     onDataChange,
13 13
     noData,
14
+    className,
14 15
     ...leftProps
15 16
   } = props
16 17
 
18
+  const contextRef = useRef()
17 19
   const loadingRef = useRef(false)
18 20
   const [payload, setPayload] = useState(params)
19 21
   const [list, setList] = useState([])
@@ -75,11 +77,27 @@ export default (props) => {
75 77
     fetchRef.current(payload)
76 78
   }, [payload, request])
77 79
 
80
+  useEffect(() => {
81
+    Taro.nextTick(() => {
82
+      Taro.createSelectorQuery().select('.list-view').node(function(res){
83
+        contextRef.current = res.node
84
+      }).exec()
85
+    })
86
+  }, [])
87
+
88
+  // https://developers.weixin.qq.com/miniprogram/dev/api/ui/scroll/ScrollViewContext.html
89
+  // ScrollViewContext 透传给父组件
90
+  useImperativeHandle(ref, () => ({
91
+    context: contextRef.current,
92
+  }))
93
+
78 94
   return (
79 95
     <ScrollView
80 96
       scrollY
97
+      enhanced
81 98
       onScrollToLower={handleScrollToLower}
82 99
       {...leftProps}
100
+      className={`${className} list-view`}
83 101
     >
84 102
       {!render
85 103
         ? props.children
@@ -91,4 +109,4 @@ export default (props) => {
91 109
       
92 110
     </ScrollView>
93 111
   )
94
-}
112
+})

+ 9
- 3
src/pages/index/tabs/Recommend.jsx View File

@@ -1,5 +1,5 @@
1 1
 import Taro from '@tarojs/taro'
2
-import { React, useState, useEffect } from 'react'
2
+import { React, useState, useEffect, useRef } from 'react'
3 3
 import iconsearch from '@/assets/icons/housemantj/search.png'
4 4
 import locationimg from '@/assets/icons/housemantj/location.png'
5 5
 import Tip from '@/components/tip'
@@ -12,9 +12,10 @@ import './less/Recommend.less'
12 12
 
13 13
 export default (props) => {
14 14
   const { router, person, location } = props
15
+
15 16
   const [activeTab, setActiveTab] = useState(0)
16 17
   const [typeList, setTypeList] = useState([])
17
-
18
+  const listRef = useRef()
18 19
 
19 20
   const [queryParams, setQueryParams] = useState({ location: location, pageNum: 1, pageSize: 10, typeId: '' })
20 21
 
@@ -34,6 +35,10 @@ export default (props) => {
34 35
     if (index == 0) {
35 36
       setQueryParams({ location: location, pageNum: 1, pageSize: 10, typeId: '' })
36 37
     }
38
+
39
+    if (listRef.current?.context) {
40
+      listRef.current.context.scrollTo({ top: 0 })
41
+    }
37 42
   }
38 43
   useEffect(() => {
39 44
     //查询分类标签表
@@ -61,7 +66,7 @@ export default (props) => {
61 66
           <view className='city'>南京</view>
62 67
           <view className='line' />
63 68
         </view>
64
-        <scroll-view scroll-x='true' scroll-view='true' bindscrolltoupper='upper' bindscrolltolower='lower' bindscroll='scroll'>
69
+        <scroll-view scrollX>
65 70
           <mp-tabs
66 71
             tabClass='tabs-Unselected'
67 72
             swiperClass='tabs-swiper'
@@ -75,6 +80,7 @@ export default (props) => {
75 80
         </scroll-view>
76 81
       </view>
77 82
       <List
83
+        ref={listRef}
78 84
         style={{ height: 'calc(100% - 145px)' }}
79 85
         request={getResourceList}
80 86
         params={queryParams}