吃个甘蔗嚼一年 3 years ago
parent
commit
e152c88540
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
-import React, {  useEffect, useRef, useState } from 'react';
1
+import React, {  useEffect, useRef, useState, useImperativeHandle } from 'react';
2
 import { ScrollView } from '@tarojs/components';
2
 import { ScrollView } from '@tarojs/components';
3
 import Taro from '@tarojs/taro';
3
 import Taro from '@tarojs/taro';
4
 
4
 
5
-export default (props) => {
5
+export default React.forwardRef((props, ref) => {
6
   const {
6
   const {
7
     render,
7
     render,
8
     request,
8
     request,
11
     onError,
11
     onError,
12
     onDataChange,
12
     onDataChange,
13
     noData,
13
     noData,
14
+    className,
14
     ...leftProps
15
     ...leftProps
15
   } = props
16
   } = props
16
 
17
 
18
+  const contextRef = useRef()
17
   const loadingRef = useRef(false)
19
   const loadingRef = useRef(false)
18
   const [payload, setPayload] = useState(params)
20
   const [payload, setPayload] = useState(params)
19
   const [list, setList] = useState([])
21
   const [list, setList] = useState([])
75
     fetchRef.current(payload)
77
     fetchRef.current(payload)
76
   }, [payload, request])
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
   return (
94
   return (
79
     <ScrollView
95
     <ScrollView
80
       scrollY
96
       scrollY
97
+      enhanced
81
       onScrollToLower={handleScrollToLower}
98
       onScrollToLower={handleScrollToLower}
82
       {...leftProps}
99
       {...leftProps}
100
+      className={`${className} list-view`}
83
     >
101
     >
84
       {!render
102
       {!render
85
         ? props.children
103
         ? props.children
91
       
109
       
92
     </ScrollView>
110
     </ScrollView>
93
   )
111
   )
94
-}
112
+})

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

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