idea

src/components/classify/courselist.js

@@ -13,14 +13,21 @@ class Classify extends Component {
     handleClick() {
         console.log(1);
     }
+
     ontabclick(tab, index) {
         console.log(tab, index)
     }
-    pulldown(){
-        alert(2)
+
+    pulldown() {
+        this.setState(status => ({
+            ispull: !status.ispull,
+            display: status.ispull ? 'none': 'block'
+        }));
     }
 
     state = {
+        ispull: false,
+        display: 'none',
         mockData: [
             {
                 title: '三月面试求职三月面试求职三月面试求职',
@@ -115,13 +122,22 @@ class Classify extends Component {
             {title: '数据结构'},
             {title: '数学'},
         ];
+        const bottom = (
+            <i className={'iconfont iconiconfront-69 pull-down'}></i>
+        )
+        const top = (
+            <i className={'iconfont iconiconfront-71 pull-down'}></i>
+        )
 
         return (
-            <div className='class-box'>
+            <div className='class-child'>
                 <div>
                     <WhiteSpace/>
-                    <i className={'iconfont iconiconfront-69 pull-down'} onClick={this.pulldown.bind(this)}></i>
-                <Tabs
+                    <div onClick={this.pulldown.bind(this)}>
+                        {this.state.ispull ? top : bottom}
+                    </div>
+
+                    <Tabs
                         tabs={tabs}
                         animated={false}
                         onTabClick={(tab, index) => this.ontabclick(tab, index)}
@@ -154,13 +170,13 @@ class Classify extends Component {
                     </Tabs>
                     <WhiteSpace/>
                 </div>
-                <div className='mbc-box'>
+                <div className='mbc-box' style={{display: this.state.display}}>
                     <div className="tabcontent">
                         <div className="class-course">
                             <p className='course-items-title'>基础入门</p>
                             <div className='items-box'>
                                 {
-                                    this.state.dataList.map((item,index)=>{
+                                    this.state.dataList.map((item, index) => {
                                         return (
                                             <a href="/#" key={index} className='item-label'>{item.title}</a>
                                         )
@@ -172,7 +188,7 @@ class Classify extends Component {
                             <p className='course-items-title'>进阶提高</p>
                             <div className='items-box'>
                                 {
-                                    this.state.dataList.map((item,index)=>{
+                                    this.state.dataList.map((item, index) => {
                                         return (
                                             <a href="/#" key={index} className='item-label'>{item.title}</a>
                                         )

src/components/classify/courselist.scss

-.class-box {
+.class-child {
   padding: 0 12px;
   position: relative;
   .v-list-item {

src/components/classify/index.js

@@ -54,7 +54,7 @@ class Classify extends Component {
                         {
                             this.state.dataList.map((item,index)=>{
                                 return (
-                                    <a href="/#" key={index} className='item-banner'><img
+                                    <a href="/classify/courselist" key={index} className='item-banner'><img
                                         src={item.src}
                                         alt=""/></a>
                                 )

src/router.js

@@ -16,10 +16,11 @@ const router = () => (
         <Switch>
             <Route exact path="/" component={Index}></Route>
             <Route path="/index" component={Index}></Route>
-            <Route path='/classify' component={Classify}></Route>
+            <Route path='/classify' component={Classify}>
+                <Route path='/classify/courselist' component={CourseList}></Route>
+            </Route>
             <Route path='/study' component={Study}></Route>
             <Route path='/my' component={My}></Route>
-            <Route path='/courselist' component={CourseList}></Route>
             <Route path='/search' component={Search}></Route>
         </Switch>
         <Menu />