张延森 3 년 전
부모
커밋
c729f5d4b3
2개의 변경된 파일30개의 추가작업 그리고 6개의 파일을 삭제
  1. 21
    3
      src/components/List/index.jsx
  2. 9
    3
      src/pages/index/tabs/Recommend.jsx

+ 21
- 3
src/components/List/index.jsx 파일 보기

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 파일 보기

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
 
34
     if (index == 0) {
35
     if (index == 0) {
35
       setQueryParams({ location: location, pageNum: 1, pageSize: 10, typeId: '' })
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
   useEffect(() => {
43
   useEffect(() => {
39
     //查询分类标签表
44
     //查询分类标签表
61
           <view className='city'>南京</view>
66
           <view className='city'>南京</view>
62
           <view className='line' />
67
           <view className='line' />
63
         </view>
68
         </view>
64
-        <scroll-view scroll-x='true' scroll-view='true' bindscrolltoupper='upper' bindscrolltolower='lower' bindscroll='scroll'>
69
+        <scroll-view scrollX>
65
           <mp-tabs
70
           <mp-tabs
66
             tabClass='tabs-Unselected'
71
             tabClass='tabs-Unselected'
67
             swiperClass='tabs-swiper'
72
             swiperClass='tabs-swiper'
75
         </scroll-view>
80
         </scroll-view>
76
       </view>
81
       </view>
77
       <List
82
       <List
83
+        ref={listRef}
78
         style={{ height: 'calc(100% - 145px)' }}
84
         style={{ height: 'calc(100% - 145px)' }}
79
         request={getResourceList}
85
         request={getResourceList}
80
         params={queryParams}
86
         params={queryParams}