react +axios渲染数据 非父子组件传值tab切换 源码
html
"en">
"UTF-8">
Title
"viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
"stylesheet" href="./css/style.css"/>
<div id="app">
div>
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代码。