Skip to content

I
icbcRPG
Commit a00da858 authored by wildfirecode13's avatar wildfirecode13
Browse files
Options

1

parent feeafefd
Hide whitespace changes
Inline Side-by-side
Showing with 86 additions and 17 deletions
project/mock/e-family/index.js
View file @ a00da858
...@@ -4,7 +4,7 @@ export const homeInfo = { ...@@ -4,7 +4,7 @@ export const homeInfo = {
{ {
"canUpdateNickName": false, "canUpdateNickName": false,
"figures": [{ "figureId": "1" }, { "figureId": "2" }, { "figureId": "3" }], "figures": [{ "figureId": "1" }, { "figureId": "2" }, { "figureId": "3" }],
"newUser": 1, "newUser": 0,
"userInfo": { "figureId": "3", "joyBeans": 10100, "nickName": "13" } "userInfo": { "figureId": "3", "joyBeans": 10100, "nickName": "13" }
}, },
"message": null, "message": null,
...@@ -85,7 +85,33 @@ export const signInfo = { ...@@ -85,7 +85,33 @@ export const signInfo = {
"message": null, "message": null,
"success": true "success": true
} }
export const pagelist = [{ "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" }] const list=[]
for(let i=1;i<=20;i++){
list.push({ "bizType": "SUB", "credits": 100, "description": `每日签到${i}`, "gmtCreate": "2020-12-22 17:02:07" })
}
const list2=[]
for(let i=1;i<=5;i++){
list2.push({ "bizType": "SUB", "credits": 100, "description": `每日签到${i}`, "gmtCreate": "2020-12-22 17:02:07" })
}
const list3=[]
export const pagelist = list
// export const pagelist = [
// { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
// { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
// { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
// { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
// { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
// { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
// { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" },
// { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" },
// // { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" },
// { "bizType": "SUB", "credits": 100, "description": "每日签到", "gmtCreate": "2020-12-22 17:02:07" }, { "bizType": "ADD", "credits": 10000, "description": "每日签到", "gmtCreate": "2020-12-22 17:01:17" }
// ]
export const dosign = { export const dosign = {
"code": null, "code": null,
"data": { "data": {
......
project/src/app.jsx
View file @ a00da858
...@@ -15,7 +15,7 @@ class App extends Component { ...@@ -15,7 +15,7 @@ class App extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
page: 'loading', page: 'detail',
}; };
} }
......
project/src/pages/detail2/detail2.jsx
View file @ a00da858
...@@ -5,33 +5,76 @@ import resList from '../../resconfig/resList'; //import API from '../../api'; ...@@ -5,33 +5,76 @@ import resList from '../../resconfig/resList'; //import API from '../../api';
import './detail2.less'; import './detail2.less';
import API from '../../api'; import API from '../../api';
const pagesize = 20;
const ratio = 2;
const listWrapperHeight = document.body.clientHeight * ratio - 214;
let canLoading = true;
let currentPage = 1;
class Detail2 extends Component { class Detail2 extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
resList: resList, resList: resList,
list: []
};
}
list:[] onScroll = () => {
if (!canLoading) {
console.log('不能加载了')
return;
}; };
const { list } = this.state;
const targetScrollTop = list.length * 55 * ratio - listWrapperHeight;
const currentScrollTop = this.refs.listref.scrollTop * ratio;
if (currentScrollTop >= targetScrollTop) {
console.log('加载新数据');
canLoading = false;
this.loadPage();
}
// console.log(currentScrollTop, targetScrollTop)
}
loadPage() {
const { list } = this.state;
currentPage++;
API.pageList({
pageNo: currentPage,
pageSize: pagesize
}).then((res) => {
canLoading = true;
const list2 = list.concat(res);
this.setState({ list: list2 });
if (res.length < pagesize) {
canLoading = false;
console.log('加载好了，但数据太短了不继续加载了')
}
})
} }
componentDidMount() { componentDidMount() {
API.pageList({ API.pageList({
pageNo:1, pageNo: currentPage,
pageSize:999999 pageSize: pagesize
}).then((res) => { }).then((res) => {
console.log('pagelist ', res) console.log('pagelist ', res)
this.setState({list:res}) this.setState({ list: res })
if (res.length < pagesize) {
canLoading = false;
console.log('数据太短了不能滚了')
}
}) })
} }
render() { render() {
const {list} = this.state const { list } = this.state
const list2 = list.map(i=>{ const list2 = list.map(i => {
return { return {
description:i.description, description: i.description,
gmtCreate:i.gmtCreate, gmtCreate: i.gmtCreate,
nums:i.bizType=='ADD' ? `+${i.credits}`: `-${i.credits}` nums: i.bizType == 'ADD' ? `+${i.credits}` : `-${i.credits}`
} }
}) })
return ( return (
...@@ -44,19 +87,19 @@ class Detail2 extends Component { ...@@ -44,19 +87,19 @@ class Detail2 extends Component {
src={this.state.resList['9d6135a5-469f-4293-b931-17786c977974'].url} src={this.state.resList['9d6135a5-469f-4293-b931-17786c977974'].url}
/> />
<img onClick={() => this.props.navigateTo('mainpage')} className="detail2_back" uuid="detail2_back" src="//yun.duiba.com.cn/spark/assets/805d9455ffa59e37f0f0f19249959c3a9c458f96.png"></img> <img onClick={() => this.props.navigateTo('mainpage')} className="detail2_back" uuid="detail2_back" src="//yun.duiba.com.cn/spark/assets/805d9455ffa59e37f0f0f19249959c3a9c458f96.png"></img>
<div className="detail2_item_list" uuid="3804f60d-697f-4d68-98b5-ca8cf2e2d3ba"> <div ref="listref" onScroll={this.onScroll} className="detail2_item_list" uuid="3804f60d-697f-4d68-98b5-ca8cf2e2d3ba">
{ {
list2.map(({description,gmtCreate,nums},i) => ( list2.map(({ description, gmtCreate, nums }, i) => (
<div key={i} className="detail2_item " uuid="4d8289ea-9464-4a92-a81c-3e24c364e707"> <div key={i} className="detail2_item " uuid="4d8289ea-9464-4a92-a81c-3e24c364e707">
<span className="detail2_item_title " uuid="48b63d65-a3d8-4b94-b979-3fcb19c9d89c"> <span className="detail2_item_title " uuid="48b63d65-a3d8-4b94-b979-3fcb19c9d89c">
{description} {description}
</span> </span>
<span className="detail2_item_day " uuid="5e6c50df-f25c-4b91-acc7-95d4829ff7db"> <span className="detail2_item_day " uuid="5e6c50df-f25c-4b91-acc7-95d4829ff7db">
{gmtCreate} {gmtCreate}
</span> </span>
<span className="detail2_item_num " uuid="e576e938-d57d-4101-82bc-c0b0782033c9"> <span className="detail2_item_num " uuid="e576e938-d57d-4101-82bc-c0b0782033c9">
{nums} {nums}
</span> </span>
<img <img
className="detail2_item_bg " className="detail2_item_bg "
uuid="46e8b6fd-f561-445c-85eb-be7136ea5183" uuid="46e8b6fd-f561-445c-85eb-be7136ea5183"
......
project/src/pages/detail2/detail2.less
View file @ a00da858
...@@ -48,7 +48,7 @@ ...@@ -48,7 +48,7 @@
position: relative; position: relative;
box-sizing: border-box; box-sizing: border-box;
width: 618px; width: 618px;
height: 109px; height: 110px;
.detail2_item_title { .detail2_item_title {
// width: 193px; // width: 193px;
// height: 23px; // height: 23px;
......
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