bug

src/components/search/search-result.js

 import React, { PureComponent } from 'react';
-import {connect} from 'react-redux';
+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 {getCourses} from './../detail/actions';
+import throttle from 'lodash/throttle'
+import classnames from "classnames";
+
+
+const ForwardRefSearchHead = React.forwardRef((props, ref) => {
+    return <SearchHeader {...props} forwardedRef={ref}/>
+})
 
 const Bottom = ({item}) => {
     return (
@@ -18,15 +24,25 @@ const Bottom = ({item}) => {
 
 @connect()
 class SearchResult extends PureComponent {
+    prevScrollY = 0
+    searchHead = React.createRef()
 
     state = {
         courseList: [],
-        value: '',
-        searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || []
+        value: decodeURIComponent(getParam('word')) || '',
+        searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
+        fixedHeader: false,
+        searchHeadStyle: {},
+        swipeDirection: 'up'
     }
 
     componentDidMount() {
         this.getCourses(getParam('word'))
+        document.addEventListener('scroll', this.handleScroll)
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('scroll', this.handleScroll)
     }
 
 
@@ -56,22 +72,57 @@ class SearchResult extends PureComponent {
     }
 
     toCourseDetail = (id) => {
-        const { dispatch, history } = this.props;
-        // dispatch(getCourses(id, () => {
-            history.push(`/detail?id=${id}`)
-        // }));
+        const {history} = this.props;
+        history.push(`/detail?id=${id}`)
     }
 
+    handleScroll = throttle(() => {
+        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`
+                        }
+                    })
+                }
+            })
+
+        } else {
+            this.setState({
+                swipeDirection: 'up'
+            })
+        }
+        /*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)
+
     render() {
         const {courseList} = this.state
 
         return (
-            <div className='search-result'>
-                <SearchHeader
+            <div
+                className={classnames('search-result', {/*[this.state.fixedHeader ? 'fixed-header' : 'static-header']*/})}>
+                <ForwardRefSearchHead
                     handleSearch={this.handleSearch}
                     value={this.state.value}
                     handleChange={this.handleChange}
                     searchHistory={this.state.searchHistory}
+                    style={this.state.searchHeadStyle}
+                    ref={this.searchHead}
                 />
                 {
 
@@ -115,7 +166,8 @@ class SearchResult extends PureComponent {
                             抱歉！没有搜到相关内容
                         </div>
                 }
-                <Recommendation />
+                <Recommendation/>
+
             </div>
         );
     }

src/components/search/search-result.scss

 .search-result {
+    padding-top: 44px;
+    /*&.fixed-header{
+         padding-top: 44px;
+         .search-head{
+             position: fixed;
+             top: 0;
+             left: 0;
+             width: 100%;
+             z-index: 10;
+         }
+     }
+
+    &.static-header{
+        padding-top: 0;
+        .search-head{
+            position: static;
+        }
+    }*/
+
+    .search-head{
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        z-index: 10;
+    }
+
     ul {
         list-style: none;
     }

src/components/search/searchHead.js

@@ -38,9 +38,8 @@ class SearchHead extends PureComponent {
     render() {
         const { isFocus } = this.state;
         const cls = classnames('submit-btn', {'submit-btn--active': isFocus})
-        console.log(isFocus);
         return (
-            <div className="search-head">
+            <div className="search-head" style={this.props.style} ref={this.props.forwardedRef}>
 
                 <div className="left" onClick={this.returnPage}>
                     <i className="iconfont iconiconfront-68"/>
@@ -57,6 +56,7 @@ class SearchHead extends PureComponent {
                         placeholder="搜索课程"
                         onFocus={() => this.changeFontColor(true)}
                         onBlur={() => this.changeFontColor(false)}
+                        onSubmit={this.search}
                     />
                 </div>
                 <div className="right right-btn" onClick={this.search}>