import {Header,Footer,Content,SubHeader} from "../../common/components/common"
import ProductList from "./productList.js"
import {ScrollOptions} from "../../common/config/config.js"
import React, {Component} from "react"
import iScroll from 'iscroll/build/iscroll-probe';
import ReactIScroll from "reactjs-iscroll"
console.log(ScrollOptions);
//商品分类列表
class ClassList extends Component{
constructor(props){
super(props)
}
handleClick(id){
console.log(id);
this.props.changeClassID(id);
}
render(){
return (
<ul className="class-list">
{
this.props.classData.map((ele,i)=>
<li onClick={()=>this.handleClick(ele.classID)} key={i}>
{ele.className}
</li>
)
}
</ul>
)
}
}
ClassList.defaultProps={
classData:[]
};
class ListPage extends Component{
constructor(props){
super(props);//让react的Component方法帮你实现组件的方法
this.state={
classData:[],
productData:[]
};
//设置默认的数据请求选项
this.classID = undefined;
this.linenumber = 5;
this.pageCode=0;
this.refresh=false;
$.get("http://datainfo.duapp.com/shopdata/getclass.php",(data)=>{
if(typeof data === 'string'){
data=JSON.parse(data)
}
console.log(data)
this.setState({
classData:data
})
},"json");
//请求商品数据
this.getProductData();
//改变this指向
this.onScrollEnd = this.onScrollEnd.bind(this);
}
changeClassID(id){
console.log(id);
console.log(this)
this.classID = id;
this.pageCode = 0;//重置页面
this.getProductData()
}
getProductData(){
$.getJSON("http://datainfo.duapp.com/shopdata/getGoods.php?callback=?",{
"classID":this.classID,
"linenumber":this.linenumber,
"pageCode":this.pageCode
},(data)=>{
//刷新需要覆盖之前的数据，加载需要和之前的数据合并
if(data){
this.setState({
productData:this.pageCode==0?data:this.state.productData.concat(data)
});
}
})
}
onScroll(myScroll){
console.log("scroll");
if(myScroll.y>60){
console.log("刷新");
this.refresh=true
}
}
onScrollEnd(myScroll){
//myScroll 是ReactIScroll 提供的操作滚动条的对象
console.log("end");
if(this.refresh){
//需要刷新就刷新
this.pageCode=0;
this.getProductData();
this.refresh = false;
}else if(myScroll.y-myScroll.maxScrollY<=20){
//如果当前的滚动位置和最大的滚动数值底下小于20，就加载更多
console.log("加载更多");
this.pageCode++;
this.getProductData()
}
}
render(){
console.log("render");
return (
<div className="page" id="list-page">
<Header title="新品上市" hasSearch={true} rightBtn={true} />
<SubHeader>
<ClassList changeClassID={(id)=>this.changeClassID(id)} classData={this.state.classData} />
</SubHeader>
<Content hasFooter={true} hasSubHeader={true} >
<ReactIScroll iScroll={IScroll} ref="IScroll"
options={ScrollOptions}
onScroll={(myScroll)=>this.onScroll(myScroll)}
onScrollEnd={this.onScrollEnd}>
<ProductList productData={this.state.productData} />
</ReactIScroll>
</Content>
<Footer active={1} />
</div>
)
}
}
ListPage.defaultProps={
listData:[]
};
export default ListPage
{
"name": "bishe5",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"yue": "webpack-dev-server --devtool eval --progress --colors --port 8888 --hot --content-base build"
},
"author": "",
"license": "ISC",
"dependencies": {
"css-loader": "^0.26.2",
"file-loader": "^0.10.1",
"node-sass": "^4.5.0",
"react": "^15.4.2",
"react-dom": "^15.4.2",
"react-iscroll": "^1.1.1",
"react-router": "^3.0.2",
"reactjs-iscroll": "^0.3.2",
"sass-loader": "^6.0.2",
"style-loader": "^0.13.2",
"url-loader": "^0.5.8"
},
"devDependencies": {
"babel-core": "^6.23.1",
"babel-loader": "^6.3.2",
"babel-preset-es2015": "^6.22.0",
"babel-preset-react": "^6.23.0",
"css-loader": "^0.26.2",
"less": "^2.7.2",
"less-loader": "^2.2.3",
"style-loader": "^0.13.2",
"webpack": "^2.2.1",
"webpack-dev-server": "^2.4.1"
}
}
出现这个问题。。啊好气啊
