刚刚学习react 好多不会的语法 希望有问题大家多多帮助
首先学习Rect 要简单知道js html 和css , 当然 我也什么不知道 从头开始
我们用到了微信的RectUI 导入后直接调用 下载地址:WXUI 按照文档安装就可以啦 当然中间我也出了问题 那就是少下载一个文件 命令一般为:npm install react-dom --save 可以调用淘宝接口否则要翻墙的 具体可以自行百度
第一个就是导入头文件
import React from 'react';
import {
Cells,
Cell,
CellBody,
CellFooter,
CellHeader,
CellsTitle,
Toast,
} from 'react-weui';
import InfiniteScroll from 'react-infinite-scroller';
import './Group.css';
import { groups } from '../../../service/api.js';//获取网络请求// ../表示上一目录
import InfiniteScroll from 'react-infinite-scroller';
import './Group.css';
import { groups } from '../../../service/api.js';//获取网络请求// ../表示上一目录
然后开始定义组件
//定义组件 value参数
const ItemGrouper = ({ value }) => (
<Cell >
<CellHeader>//标签
<img className="group_cell_header_img" src={value.avatar} alt="" /> //className 调用的是Group.css 里对应的格式
</CellHeader>
<CellBody className="group_cell_body">
{value.nickname}//对象value里的nickname属性
</CellBody>
<CellFooter className="group_cell_footer">//CellFooter标签 表示一行sell 靠右边的内容
{value.cellphone}
</CellFooter>
</Cell>
);
css部分:
.group_cell_header_img{
width: 50px;
height: 50px;
border-radius:50%;
float: left;
}
.group_cell_footer_img{
padding-top: 10px;
}
.group_cell_body{
margin-left: 10px;
font-size: 15px;
color: #333333;
}
.group_cell_footer {
font-size: 13px;
color: #2c8cdd;
background: url('../../../assets/images/phone.png') no-repeat ;//路径
background-size: 9px 13px;
padding-left: 16px;
}
.group_cell_footer a{
color: #2c8cdd;
margin-top: 10px;
}
.group_loader{
padding: 14px;
text-align: center;
background-color: #eeeeee;
}
.group_header {
margin-top: 0px;
}
具体UI及数据处理:
class Groups extends React.Component {
constructor(props) {
super(props);
this.state = {
header: {
title: '',
phone: '',
display: 'block',
telPhone: '',
},
showLoading: true,
groupList: [],
hasMore: false,
page: 1,
};
this.loadMoreFn = this.loadMoreFn.bind(this);
this.getGroupData = this.getGroupData.bind(this);
}
componentDidMount() {
this.getGroupData();
}
getGroupData() {
groups({ page: this.state.page })
.then(({ jsonResult }) => {
console.log(jsonResult);
this.setState({
showLoading: false,
groupList: jsonResult.data.data_list,
page: jsonResult.data.next_curosr,
hasMore: jsonResult.data.next_curosr > 0,
display: 'none',
header: {
title: '**公众号',
phone: '13126654710',
telPhone: 'tel:'.concat('13126654710'),
display: 'block',
},
});
});
}
loadMoreFn() {
if (this.state.page === 1) {
// 规避错误,page=1时永远不会到底加载更多
return;
}
groups({ page: this.state.page })
.then(({ jsonResult }) => {
console.log(jsonResult);
const temp = this.state.groupList.concat(jsonResult.data.data_list);
this.setState({
groupList: temp,
page: jsonResult.data.next_curosr,
hasMore: jsonResult.data.next_curosr > 0,
});
});
}
render() {
return (
<div>
<Toast icon="loading" show={this.state.showLoading}>加载中...</Toast>
<Cells>
<Cell>
<CellBody className="group_cell_body group_head_title">{this.state.header.title}</CellBody>
<CellFooter className="group_cell_footer" style={{ display: this.state.header.display }}>
<a href={this.state.header.telPhone}>{this.state.header.phone}</a>
</CellFooter>
</Cell>
</Cells>
<CellsTitle>我的下级</CellsTitle>
<Cells>
<InfiniteScroll
loadMore={this.loadMoreFn}
hasMore={this.state.hasMore}
loader={<div className="group_loader">加载中 ...</div>}>
{
this.state.groupList.map((item, index) =>
<ItemGrouper value={item} key={index} />)
}
</InfiniteScroll>
</Cells>
</div>
);
}
}
module.exports = Groups;
数据结构
const user = (page) => {
let p = page || 1;
return ({
"id": `${p}`,
"login": "yang",
"nickname": "还有谁",
"cellphone": "13723144563",
"email": "china@china.com",
"access_token": "fab2bf7a0878ed61e834c3cad09a5549",
"avatar": "http://stimg2.tuicool.com/3uEjYv.png",
"created_at": "2016-12-12 12:12:12",
"updated_at": "2016-12-12 12:12:12"
})
};