搜索

src/components/search/search-result.js

 import React, { PureComponent } from 'react';
-import { connect } from 'react-redux';
 import SearchHeader from './searchHead'
 import VList from '@/common/VList'
 import { http, getParam } from '@/utils'
 import './search-result.scss'
 import Recommendation from './recommendation'
 import throttle from 'lodash/throttle'
-import classnames from "classnames";
 
 
 const ForwardRefSearchHead = React.forwardRef((props, ref) => {
@@ -22,18 +20,19 @@ const Bottom = ({item}) => {
     )
 }
 
-@connect()
 class SearchResult extends PureComponent {
     prevScrollY = 0
     searchHead = React.createRef()
+    swipeUp = 'up'
+    swipeDown = 'down'
 
     state = {
         courseList: [],
         value: decodeURIComponent(getParam('word')) || '',
         searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
         fixedHeader: false,
-        searchHeadStyle: {},
-        swipeDirection: 'up'
+        searchHeadStyle: {top: 0},
+        swipeDirection: this.swipeUp
     }
 
     componentDidMount() {
@@ -80,42 +79,50 @@ class SearchResult extends PureComponent {
         let y = window.scrollY, headY = this.searchHead.current.offsetTop
         if (y < this.prevScrollY) {
 
-            this.state.swipeDirection !== 'down' && this.setState({
-                swipeDirection: 'down'
-            }, () => {
-                if(this.state.swipeDirection === 'down'){
-                    this.setState({
-                        searchHeadStyle: {
-                            top: `${y > headY ? y - 44 : y}px`
-                        }
-                    })
-                }
-            })
+            if (this.state.swipeDirection === this.swipeDown) {
+
+                y <= headY && this.state.searchHeadStyle.position !== 'fixed' && this.setState({
+                    searchHeadStyle: {
+                        top: `0`,
+                        position: 'fixed'
+                    }
+                })
+
+            } else {
+                this.setState({
+                    swipeDirection: this.swipeDown
+                }, () => {
+                    if (this.state.swipeDirection === this.swipeDown) {
+                        this.setState({
+                            searchHeadStyle: {
+                                top: `${y > headY ? y - 44 : y}px`
+                            }
+                        })
+                    }
+                })
+            }
+
 
         } else {
+            this.state.swipeDirection !== this.swipeUp &&
             this.setState({
-                swipeDirection: 'up'
+                swipeDirection: this.swipeUp,
+                searchHeadStyle: {
+                    position: 'absolute',
+                    top: `${y}px`
+                }
             })
-        }
-        /*if (this.state.fixedHeader) {
-            y >= this.prevScrollY && this.setState({fixedHeader: false})
-        } else {
-            y <= this.prevScrollY && this.setState({fixedHeader: true})
-        }
 
-        this.searchHeadStyle = {
-            position: 'absolute',
-            top: `${y - 44}px`
-        }*/
+        }
         this.prevScrollY = y
-    }, 30)
+    }, 0)
 
     render() {
         const {courseList} = this.state
 
         return (
             <div
-                className={classnames('search-result', {/*[this.state.fixedHeader ? 'fixed-header' : 'static-header']*/})}>
+                className={'search-result'}>
                 <ForwardRefSearchHead
                     handleSearch={this.handleSearch}
                     value={this.state.value}