html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<!--react的与dom相关的一些功能-->
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!--将浏览器不支持的jsx语法转化为js语法-->
<script src="https://unpkg.com/babel-standalone@6.15.0/babel.min.js"></script>
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.4/??flexible_css.js,flexible.js"></script>
<script src="./js/axios.js"></script>
<script src="./js/jquery-3.2.1.js"></script>
<link rel="stylesheet" href="./css/style.css"/>
<!--字体图标-->
</head>
<body>
<div id="app">
</div>
<script type="text/babel">
//获取标签的名
var bus=$("#app");
//头部
class Header extends React.Component{
render(){
return(
<div className="header">
<div>
<img src="img/3_01.jpg" alt="" />
</div>
</div>
)
}
}
//主体
class Main extends React.Component{
constructor(props){
super(props)
this.state={
show:1,
arr:[]
}
}
render(){
console.log(this.state.show)
return(
<div className="main">
{
this.state.show==1?<Main1></Main1>:(this.state.show==2?<Main2></Main2>:(this.state.show==3?<Main3></Main3>:<Main4></Main4>))
}
</div>
)
}
//接到trigger 发来的数据并绑定
componentDidMount(){
bus.on('test',(event,pson)=>{
// console.log(pson)
this.setState({
show:pson
})
})
}
}
// 内容
class Main1 extends React.Component{
constructor(props){
super(props)
this.state={
show:0,
arr:[]
}
}
render(){
return(
<div className="main">
<div className="m_1">
<ul>
{
// console.log(this.state)
this.state.arr.map((ele,index)=>{
return <li key={index}>
<span><img src={ele.img} alt=""/></span>
<span>
<p>{ele.name}</p>
<p>{ele.desc}</p>
</span>
<span> {ele.time}</span>
</li>
})
}
</ul>
</div>
</div>
)
}
//使用axios获取数据
componentDidMount(){
var url="./js/tsconfig.json"
axios.get(url).then((res)=>{
console.log(res)
this.setState({
arr:res.data
})
})
}
}
class Main2 extends React.Component{
render(){
return(
<div className="m_2">
<h1>这是微信的第二个页面</h1>
</div>
)
}
}
class Main3 extends React.Component{
render(){
return(
<div className="m_3">
<h1>这是微信的第三个页面</h1>
</div>
)
}
}
class Main4 extends React.Component{
render(){
return(
<div className="m_4">
<h1>这是微信的第四个页面</h1>
</div>
)
}
}
//底部
class Footer extends React.Component{
constructor(props){
super(props)
this.state={
show:0
}
}
render(){
return(
<div className="footer">
<div className="f_1" onClick={ ()=>{
this.setState({
show:1
})
}}><img src="img/3_12.jpg" alt=""/></div>
<div className="f_2" onClick={ ()=>{
this.setState({
show:2
})
}}><img src="img/3_14.jpg" alt=""/></div>
<div className="f_3" onClick={ ()=>{
this.setState({
show:3
})
}}><img src="img/3_16.jpg" alt=""/></div>
<div className="f_4" onClick={ ()=>{
this.setState({
show:4
})
}}><img src="img/3_18.jpg" alt=""/></div>
</div>
)
}
//使用trigger发送数据
componentDidUpdate(){
bus.trigger("test",this.state.show)
}
}
ReactDOM.render(
<div className="warp">
<Header/>
<Main/>
<Footer/>
</div>
,
document.getElementById('app')
);
</script>
</body>
</html>
css
m_style.css
/* CSS Document */
body,div,p,ul,ol,li,dl,dt,dd,h1,h2,h3,h4,h5,h6,table,tr,td,form,input,select,textarea,span,img,a,em,strong,*{ margin:0; padding:0;}
body{ font-family:"微软雅黑"; font-size:12px; color:#000000;}
ul,ol,li{ list-style:none;}
h1,h2,h3,h4,h5,h6{ font-size:14px;}
input,select,textarea{ vertical-align:middle;}
img{ border:none; vertical-align:middle;}
a{ text-decoration:none; color:#333333;}
a:hover{ color:#009999;}
.clear{ clear:both; height:0px; width:0px; overflow:hidden;}
.html{ font-size: 62.5%;}
style.css
@import "m_style.css";#app{display:flex;flex-direction:column;width:100%;height:100%}#app .warp{display:flex;flex-direction:column;width:100%;height:100%}#app .warp .header{width:10rem;height:1.944444rem}#app .warp .header img{width:100%;height:auto;vertical-align:middle}#app .warp .main{width:10rem;height:14.375rem;overflow-y:scroll}#app .warp .main .m_1{width:10rem;height:14.375rem}#app .warp .main .m_1 ul li{width:10rem;height:1.847222rem;text-align:center;display:flex}#app .warp .main .m_1 ul li span{line-height:1.847222rem;flex:4}#app .warp .main .m_1 ul li span:nth-child(1){width:1.416666rem;height:1.416666rem}#app .warp .main .m_1 ul li span:nth-child(1) img{width:1.416666rem;height:1.416666rem;margin-left:.333333rem}#app .warp .main .m_1 ul li span:nth-child(2){float:left}#app .warp .main .m_1 ul li span:nth-child(2) p{line-height:.694444rem}#app .warp .main .m_2{width:10rem;height:14.375rem}#app .warp .main .m_3{width:10rem;height:14.375rem}#app .warp .main .m_4{width:10rem;height:14.375rem}#app .warp .footer{width:10rem;height:1.208333rem;line-height:1.208333rem;background:#fcfcfc;display:flex;flex-direction:row}#app .warp .footer .f_1{flex:3;width:1.083333rem;height:1.208333rem;margin:0 auto}#app .warp .footer .f_1 img{width:1.083333rem;height:1.208333rem;vertical-align:middle;text-align:center;margin-left:.930555rem}#app .warp .footer .f_2{flex:3;width:1.083333rem;height:1.208333rem;margin:0 auto;text-align:center}#app .warp .footer .f_2 img{width:1.083333rem;height:1.208333rem;vertical-align:middle;text-align:center;margin-left:.930555rem}#app .warp .footer .f_3{flex:3;width:1.083333rem;height:1.208333rem;margin:0 auto;text-align:center}#app .warp .footer .f_3 img{width:1.083333rem;height:1.208333rem;vertical-align:middle;text-align:center;margin-left:.930555rem}#app .warp .footer .f_4{flex:3;width:1.083333rem;height:1.208333rem;margin:0 auto;text-align:center}#app .warp .footer .f_4 img{width:1.083333rem;height:1.208333rem;vertical-align:middle;text-align:center;margin-left:.930555rem}
json数据
[
{"img":"img/3_04.jpg","name":"团队","desc":"院办:[图片]","time":"5-9","id":"1"},
{"img":"img/3_07.jpg","name":"1509","desc":"讲师:[图片]","time":"5-9","id":"2"},
{"img":"img/3_09.png","name":"综合群","desc":"班主任-王大鹏:[鼓掌]","time":"1-11","id":"3"},
{"img":"img/3_07.jpg","name":"教研室讨论组","desc":"陈雪萍:日考答案","time":"1-10","id":"4"},
{"img":"img/3_09.png","name":"高端大气上档次2班","desc":"丁建军-党员关系:[图片]","time":"1-8","id":"5"},
{"img":"img/3_04.jpg","name":"柳一小永远的车队","desc":"壮壮-我回去吧:[图片]","time":"1-7","id":"6"},
{"img":"img/3_09.png","name":"漆老师","desc":"全体消息:[图片]","time":"1-6","id":"7"},
{"img":"img/3_07.jpg","name":"游戏1508A设计","desc":"文件-十二单元:[图片]","time":"1-3","id":"8"},
{"img":"img/3_04.jpg","name":"设计系的大神们","desc":"讲师-罗青:[图片]","time":"1-1","id":"9"}
]
建议大家多自己写代码,少copy代码。