Merge branch 'bug' into pre

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 {getCourses} from './../detail/actions';
+import throttle from 'lodash/throttle'
+
+
+const ForwardRefSearchHead = React.forwardRef((props, ref) => {
+    return <SearchHeader {...props} forwardedRef={ref}/>
+})
 
 const Bottom = ({item}) => {
     return (
@@ -16,17 +20,28 @@ const Bottom = ({item}) => {
     )
 }
 
-@connect()
 class SearchResult extends PureComponent {
+    prevScrollY = 0
+    searchHead = React.createRef()
+    swipeUp = 'up'
+    swipeDown = 'down'
 
     state = {
         courseList: [],
-        value: '',
-        searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || []
+        value: decodeURIComponent(getParam('word')) || '',
+        searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
+        fixedHeader: false,
+        searchHeadStyle: {top: 0},
+        swipeDirection: this.swipeUp
     }
 
     componentDidMount() {
         this.getCourses(getParam('word'))
+        document.addEventListener('scroll', this.handleScroll)
+    }
+
+    componentWillUnmount() {
+        document.removeEventListener('scroll', this.handleScroll)
     }
 
 
@@ -56,22 +71,65 @@ 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) {
+
+            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: this.swipeUp,
+                searchHeadStyle: {
+                    position: 'absolute',
+                    top: `${y}px`
+                }
+            })
+
+        }
+        this.prevScrollY = y
+    }, 0)
+
     render() {
         const {courseList} = this.state
 
         return (
-            <div className='search-result'>
-                <SearchHeader
+            <div
+                className={'search-result'}>
+                <ForwardRefSearchHead
                     handleSearch={this.handleSearch}
                     value={this.state.value}
                     handleChange={this.handleChange}
                     searchHistory={this.state.searchHistory}
+                    style={this.state.searchHeadStyle}
+                    ref={this.searchHead}
                 />
                 {
 
@@ -115,7 +173,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}>