tab页不能重启的问题

app/src/page/appoint.vue

@@ -3,9 +3,14 @@
 
         <div class="as">
             <img src="../static/images/main/banner.png" height="121" width="414"/>
-            <mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#ffffff" @change="getIndex" v-if="reFresh">
-                <mu-tab v-for="day in weeks">{{ day.data }} <br> <em>{{ day.name }}</em></mu-tab>
-            </mu-tabs>
+            <!--<mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#ffffff" @change="getIndex" v-if="reFresh">-->
+                <!--<mu-tab v-for="day in weeks">{{ day.data }} <br> <em>{{ day.name }}</em></mu-tab>-->
+            <!--</mu-tabs>-->
+            <div class="tabs">
+                <div :class="[{'tab':true},{'activeTab':i == active}]" v-for="(day,i) in weeks" @click="changeActive(i)">
+                    {{ day.name }} <br> <em>{{ day.data }}</em>
+                </div>
+            </div>
             <span class="sum">
         {{ today }} 预约名额剩余
         <em class="green" v-if="num > 0">{{ num }}</em>
@@ -136,6 +141,9 @@
 
         },
         methods: {
+            changeActive(i){
+                this.active = i;
+            },
             getIndex(val) {
                 console.log(val);
             },
@@ -635,6 +643,50 @@
         box-shadow: none;
     }
 
+    .tabs {
+        width: 100%;
+        justify-content: space-between;
+        white-space: nowrap;
+        overflow-y: hidden;
+        overflow-x: scroll;
+        display: flex;
+        border-bottom: 1px solid #ccc;
+    }
+    .tab {
+        font-size: 14px;
+        min-width: 72px;
+        max-width: 264px;
+        background: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        text-decoration: none;
+        border: none;
+        outline: none;
+        color: inherit;
+        position: relative;
+        line-height: normal;
+        -webkit-transition: all .45s cubic-bezier(.445,.05,.55,.95);
+        transition: all .45s cubic-bezier(.445,.05,.55,.95);
+        width: 85px;
+        float: left;
+        height: 51px;
+        margin-right: 6px;
+        cursor: pointer;
+        line-height: 20px;
+        padding-top: 4px;
+        text-align: center;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        border: 1px solid #ccc;
+        border-bottom: 0;
+    }
+    .tab.activeTab {
+        color: #fff;
+        background-color: #2196f3;
+        color: hsla(0,0%,100%,.7);
+    }
+
     /*响应式调整*/
     @media only screen and (max-width: 320px) {
         .list .dotContainer {

app/src/page/lesson.vue

@@ -4,10 +4,14 @@
         <h5 class="lessonName">
             {{ lessonName }}
         </h5>
-        <mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#33CAF7" v-if="reFresh">
-            <mu-tab v-for="(day,i) in weeks">{{ day.name }} <br> <em>{{ day.data }}</em></mu-tab>
-        </mu-tabs>
-
+        <!--<mu-tabs :value.sync="active" color="#F2F2F2" indicator-color="#33CAF7" v-if="reFresh">-->
+            <!--<mu-tab v-for="(day,i) in weeks">{{ day.name }} <br> <em>{{ day.data }}</em></mu-tab>-->
+        <!--</mu-tabs>-->
+        <div class="tabs">
+            <div :class="[{'tab':true},{'activeTab':i == active}]" v-for="(day,i) in weeks" @click="changeActive(i)">
+                {{ day.name }} <br> <em>{{ day.data }}</em>
+            </div>
+        </div>
         <bottomTab :curTab="thisTab"></bottomTab>
         <div class="context">
             <ul class="list">
@@ -81,6 +85,9 @@
             }
         },
         methods: {
+            changeActive(i){
+                this.active = i;
+            },
             getQueryNextWeek() {
                 console.log(333);
                 let that = this;
@@ -154,6 +161,8 @@
             },
             getList() {
                 let that = this;
+                console.log(that.weeks);
+                console.log(that.active);
                 let param = {
                     token: localStorage.token,
                     shopId: this.$route.query.shopId,
@@ -513,6 +522,49 @@
         right: 10%;
     }
 
+    .tabs {
+        width: 100%;
+        justify-content: space-between;
+        white-space: nowrap;
+        overflow-y: hidden;
+        overflow-x: scroll;
+        display: flex;
+        border-bottom: 1px solid #ccc;
+    }
+    .tab {
+        font-size: 14px;
+        min-width: 72px;
+        max-width: 264px;
+        background: none;
+        -webkit-appearance: none;
+        -moz-appearance: none;
+        appearance: none;
+        text-decoration: none;
+        border: none;
+        outline: none;
+        color: inherit;
+        position: relative;
+        line-height: normal;
+        -webkit-transition: all .45s cubic-bezier(.445,.05,.55,.95);
+        transition: all .45s cubic-bezier(.445,.05,.55,.95);
+        width: 85px;
+        float: left;
+        height: 51px;
+        margin-right: 6px;
+        cursor: pointer;
+        line-height: 20px;
+        padding-top: 4px;
+        text-align: center;
+        border-top-left-radius: 5px;
+        border-top-right-radius: 5px;
+        border: 1px solid #ccc;
+        border-bottom: 0;
+    }
+    .tab.activeTab {
+        color: #fff;
+        background-color: #2196f3;
+        color: hsla(0,0%,100%,.7);
+    }
 
     @media only screen and (max-width: 640px) {