react-search

//search页面
import React, { Component } from 'react';
import "../../style/search.styl"
import SongList from '../../components/SongList'
class Search extends Component {
    constructor() {
        super()
        this.state = {
            hotSearch: [],
            searchVal: "",
            flag: true,
            searchList: []
        }
    }
    componentDidMount () {
        this.$http.get('/search/hot').then(res => {
            console.log(res)
            this.setState({
                hotSearch: res.data.result.hots
            })
        })
    }
    search (e) {
        if (!e.target.value) {
            this.setState({
                searchVal: e.target.value,
                flag: true
            })
        } else {
            this.setState({
                searchVal: e.target.value,
                flag: false
            })
        }

    }
    keydown (e) {
        console.log(e.keyCode)
        if (e.keyCode == 13) {
            // 调用搜索接口
            this.$http.get("/search?keywords=" + e.target.value).then(res => {
                console.log(res)
                this.setState({
                    searchList: res.data.result.songs
                })
            })
        }
    }
    render () {
        let { hotSearch, searchVal, flag } = this.state
        return (
            <div className="search">
                <div className="search-box">
                    <input type="text" value={searchVal} onKeyDown={this.keydown.bind(this)} onChange={this.search.bind(this)} />
                </div>
                {
                    flag && <div className="box">
                        <p>热门搜索</p>
                        <div className="hot-search">
                            {
                                hotSearch.map((item, index) => {
                                    return <span key={index}>{item.first}</span>
                                })
                            }
                        </div>
                        <div className="search-history">
                            <ul>
                                <li>
                                    <span></span>
                                    <span>x</span>
                                </li>
                            </ul>
                        </div>
                    </div>
                }
                <SongList newMusic={this.state.searchList} />

            </div>
        );
    }
}

export default Search;
//组件
import React, { Component } from 'react'
import "../style/songList.styl"
// 可以让非路由组件拥有路由组件的属性  history location match
import { withRouter } from 'react-router-dom'
import BScroll from 'better-scroll'
// 1. 父元素 > 1个子元素 2. 子元素的高度必须大于父元素的高度 3. 父元素必须overflowhidden
class SongList extends Component {
    constructor() {
        super()
        this.state = {
            end: 30,
            flag: false
        }
    }
    componentDidMount () {
        let bs = new BScroll(".songList", {
            probeType: 2,
            click: true
        })
        var that = this
        bs.on("scroll", function () {
            // console.log(this.y)
            // 当上拉加载完全显示出来，我们要把上拉加载缓存释放加载
            if (this.y < this.maxScrollY - 50) {
                console.log("满足条件")
                that.setState({
                    flag: true
                })
            } else {
                that.setState({
                    flag: false
                })
            }
        })
        bs.on("scrollEnd", function () {
            if (that.state.flag) {
                that.setState({
                    end: that.state.end + 30
                })
            }
        })
    }
    play (id) {
        console.log(this)
        this.props.history.push("/play?id=" + id)
    }
    render () {
        let { end, flag } = this.state
        return (
            <div className="songList">
                <ul>
                    {
                        this.props.newMusic.slice(0, end).map(item => {
                            return <li onClick={this.play.bind(this, item.id)} key={item.id}>
                                <div className="songContent">
                                    <p>{item.name}</p>
                                    <p>
                                        {
                                            (function () {
                                                if (item.song) {
                                                    return item.song.artists.map((val, index) => {
                                                        return val.name
                                                    }).join(" / ")
                                                } else if (item.ar) {
                                                    return item.ar.map((val, index) => {
                                                        return val.name
                                                    }).join(" / ")
                                                } else {
                                                    return item.artists.map((val, index) => {
                                                        return val.name
                                                    }).join(" / ")
                                                }
                                            })()
                                        }
                                         - <span>{item.name}</span>
                                    </p>
                                </div>
                                <div className="goPlay">
                                    <i className="iconfont icon-ziyuan"></i>
                                </div>
                            </li>
                        })
                    }
                    <p className="pullUp">
                        {
                            flag ? "释放加载" : "上拉加载"
                        }
                    </p>
                </ul>

            </div>
        )
    }
}
export default withRouter(SongList)