import React, { Component, Fragment } from 'react'
import axios from "axios"
import classifyDetail from "../../scss/classify/classifyDetail.module.scss"
import { withRouter } from 'react-router-dom';
class ClassifyDetail extends Component {
constructor() {
super()
this.state = {
tab: [
{
name: "综合排序",
key: ''
},
{
name: "做过最多",
key: "dishNum"
},
{
name: "达人食谱",
key: "master"
},
],//定义页面上边nav的内容
searchKey: '',//路由跳转传递过来的关键词,是要在上边展示的
pageIndex: 0,//定义发送请求时的相关参数
isActive: "",
show_list: [],//定义展示用的数组
isloading:false// loading 如果是true 就让loading这个图出现,false 隐藏
}
}
componentDidMount() {
this.setState({
searchKey: this.props.match.params.name
}, () => {
console.log(this.state.searchKey)
this.get_all()
})
// this.refs.scroll.addEventListener("scroll", this.get_onScroll, true)
//可以这里监听,也可以下边绑定滚动事件,注意是监听dom节点,不是window
}
//页面跳转过来获取全部数据
get_all = () => {
//请求数据 让loading图出现
this.setState({
isloading:true
})
axios.get(`https://api.hongbeibang.com/search/getMoreRecipe?pageIndex=${this.state.pageIndex}&pageSize=10&keyword=${this.state.searchKey}&sort=${this.state.isActive}`)
.then((res) => {
// 拿到参数之后 让loading 隐藏
this.setState({
isloading:false
})
//这块的判断是有必要的,如果数组长度为0,说明是第一次请求数据,否则是再此基础上继续请求数据
if (this.state.show_list.length === 0) {
this.setState({
show_list: res.data.data.search.list.recipe.data
}, () => {
// console.log(this.state.show_list)
})
} else {
//长度不为0,说明之前已经有数据了,是再次请求,需要解构数组
let newArr = this.state.show_list
newArr = newArr.concat(res.data.data.search.list.recipe.data)
this.setState({
show_list: newArr
}, () => {
// console.log(this.state.show_list)
})
}
})
}
//点击li,切换相关展示内容,传递这里定义的key,作为参数,发送请求
tabsChange = (key) => {
//点击时,修改定义的相关内容
this.setState({
pageIndex: 0,
isActive: key,
show_list: [],
}, () => {
this.get_all()
})
}
//鼠标滚动获取数据
get_onScroll = (e) => {
let { scroll } = this.refs
// scrollTop为滚动条在Y轴上的滚动距离。
// clientHeight为内容可视区域的高度。
// scrollHeight为内容可视区域的高度加上溢出(滚动)的距离。
if (scroll.scrollHeight >
scroll.clientHeight && scroll.scrollTop +
scroll.clientHeight === scroll.scrollHeight) {
this.setState({
pageIndex: this.state.pageIndex + 10,
}, () => {
this.get_all()
})
}
}
//点击跳转到下个页面
toItem = (id) => {
this.props.history.push(`/recipe/${id}`)
}
render() {
let { tab, show_list, isActive } = this.state
let style1 = {
display:'none'
}
return (
<Fragment>
<div >
<ul className={classifyDetail.nav} >
{
tab.map((item) => <li key={item.key}
className={isActive === item.key ? classifyDetail.active : ""}
onClick={this.tabsChange.bind(this, item.key)}>{item.name}</li>)
}
</ul>
<div ref="scroll" onScroll={this.get_onScroll} className={classifyDetail.scrollcontent}>
<div style={{ height: "50px" }}></div>
{
show_list.map((item, index) => {
return <div className={classifyDetail.content} key={index} onClick={this.toItem.bind(this, item.contentId)}>
<div className={classifyDetail.imgbox}>
<img src={item.coverImage} alt="" />
</div>
<div className={classifyDetail.text}>
<h2>{item.coverTitle}</h2>
<p className={classifyDetail.p1}>{item.clientName}</p>
<p className={classifyDetail.p2}>
<span>{item.collectNum}收藏</span>
<span>{item.dishNum}人做过</span>
</p>
</div>
</div>
})
}
<div style={this.state.isloading? null : style1} className={classifyDetail.loading}>
<img src={require('./image/loading.png')} alt=""/>
</div>
</div>
</div>
</Fragment>
)
}
}
export default withRouter(ClassifyDetail);
loading
最新推荐文章于 2021-11-03 15:26:49 发布