Commit e3f4c090 by zhanghaozhe

bug

parent 5e29c1a8
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import {connect} from 'react-redux'; import { connect } from 'react-redux';
import SearchHeader from './searchHead' import SearchHeader from './searchHead'
import VList from '@/common/VList' import VList from '@/common/VList'
import { http, getParam } from '@/utils' import { http, getParam } from '@/utils'
import './search-result.scss' import './search-result.scss'
import Recommendation from './recommendation' 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}) => { const Bottom = ({item}) => {
return ( return (
...@@ -18,15 +24,25 @@ const Bottom = ({item}) => { ...@@ -18,15 +24,25 @@ const Bottom = ({item}) => {
@connect() @connect()
class SearchResult extends PureComponent { class SearchResult extends PureComponent {
prevScrollY = 0
searchHead = React.createRef()
state = { state = {
courseList: [], courseList: [],
value: '', value: decodeURIComponent(getParam('word')) || '',
searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [] searchHistory: JSON.parse(localStorage.getItem('searchHistory')) || [],
fixedHeader: false,
searchHeadStyle: {},
swipeDirection: 'up'
} }
componentDidMount() { componentDidMount() {
this.getCourses(getParam('word')) this.getCourses(getParam('word'))
document.addEventListener('scroll', this.handleScroll)
}
componentWillUnmount() {
document.removeEventListener('scroll', this.handleScroll)
} }
...@@ -56,22 +72,57 @@ class SearchResult extends PureComponent { ...@@ -56,22 +72,57 @@ class SearchResult extends PureComponent {
} }
toCourseDetail = (id) => { toCourseDetail = (id) => {
const { dispatch, history } = this.props; const {history} = this.props;
// dispatch(getCourses(id, () => { history.push(`/detail?id=${id}`)
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() { render() {
const {courseList} = this.state const {courseList} = this.state
return ( return (
<div className='search-result'> <div
<SearchHeader className={classnames('search-result', {/*[this.state.fixedHeader ? 'fixed-header' : 'static-header']*/})}>
<ForwardRefSearchHead
handleSearch={this.handleSearch} handleSearch={this.handleSearch}
value={this.state.value} value={this.state.value}
handleChange={this.handleChange} handleChange={this.handleChange}
searchHistory={this.state.searchHistory} searchHistory={this.state.searchHistory}
style={this.state.searchHeadStyle}
ref={this.searchHead}
/> />
{ {
...@@ -115,7 +166,8 @@ class SearchResult extends PureComponent { ...@@ -115,7 +166,8 @@ class SearchResult extends PureComponent {
抱歉!没有搜到相关内容 抱歉!没有搜到相关内容
</div> </div>
} }
<Recommendation /> <Recommendation/>
</div> </div>
); );
} }
......
.search-result { .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 { ul {
list-style: none; list-style: none;
} }
......
...@@ -38,9 +38,8 @@ class SearchHead extends PureComponent { ...@@ -38,9 +38,8 @@ class SearchHead extends PureComponent {
render() { render() {
const { isFocus } = this.state; const { isFocus } = this.state;
const cls = classnames('submit-btn', {'submit-btn--active': isFocus}) const cls = classnames('submit-btn', {'submit-btn--active': isFocus})
console.log(isFocus);
return ( return (
<div className="search-head"> <div className="search-head" style={this.props.style} ref={this.props.forwardedRef}>
<div className="left" onClick={this.returnPage}> <div className="left" onClick={this.returnPage}>
<i className="iconfont iconiconfront-68"/> <i className="iconfont iconiconfront-68"/>
...@@ -57,6 +56,7 @@ class SearchHead extends PureComponent { ...@@ -57,6 +56,7 @@ class SearchHead extends PureComponent {
placeholder="搜索课程" placeholder="搜索课程"
onFocus={() => this.changeFontColor(true)} onFocus={() => this.changeFontColor(true)}
onBlur={() => this.changeFontColor(false)} onBlur={() => this.changeFontColor(false)}
onSubmit={this.search}
/> />
</div> </div>
<div className="right right-btn" onClick={this.search}> <div className="right right-btn" onClick={this.search}>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment