实现返回按钮的功能 

  1 <template>
  2   <div class="app-container">
  3 
  4     <!-- 顶部 Header 区域 -->
  5     <mt-header fixed title="黑马程序员·Vue项目">
  6       <span slot="left" @click="goBack" v-show="flag">
  7         <mt-button icon="back">返回</mt-button>
  8       </span>
  9     </mt-header>
 10 
 11 
 12     <!-- 中间的 路由 router-view 区域 -->
 13         <transition>
 14             <router-view></router-view>
 15         </transition>
 16 
 17 
 18     <!-- 底部 Tabbar 区域 -->
 19     <nav class="mui-bar mui-bar-tab">
 20             <router-link class="mui-tab-item-llb" to="/home">
 21                 <span class="mui-icon mui-icon-home"></span>
 22                 <span class="mui-tab-label">首页</span>
 23             </router-link>
 24             <router-link class="mui-tab-item-llb" to="/member">
 25                 <span class="mui-icon mui-icon-contact"></span>
 26                 <span class="mui-tab-label">会员</span>
 27             </router-link>
 28             <router-link class="mui-tab-item-llb" to="/shopcar">
 29                 <span class="mui-icon mui-icon-extra mui-icon-extra-cart">
 30                     <span class="mui-badge" id="badge">{{ $store.getters.getAllCount }}</span>
 31                 </span>
 32                 <span class="mui-tab-label">购物车</span>
 33             </router-link>
 34             <router-link class="mui-tab-item-llb" to="/search">
 35                 <span class="mui-icon mui-icon-search"></span>
 36                 <span class="mui-tab-label">搜索</span>
 37             </router-link>
 38         </nav>
 39 
 40   </div>
 41 </template>
 42 
 43 <script>
 44 export default {
 45   data() {
 46     return {
 47       flag: false
 48     };
 49   },
 50   created() {
 51     this.flag = this.$route.path === "/home" ? false : true;
 52   },
 53   methods: {
 54     goBack() {
 55       // 点击后退
 56       this.$router.go(-1);
 57     }
 58   },
 59   watch: {
 60     "$route.path": function(newVal) {
 61       if (newVal === "/home") {
 62         this.flag = false;
 63       } else {
 64         this.flag = true;
 65       }
 66     }
 67   }
 68 };
 69 </script>
 70 
 71 
 72 <style lang="scss" scoped>
 73 .mint-header {
 74   z-index: 99;
 75 }
 76 .app-container {
 77   padding-top: 40px;
 78   padding-bottom: 50px;
 79   overflow-x: hidden;
 80 }
 81 
 82 .v-enter {
 83   opacity: 0;
 84   transform: translateX(100%);
 85 }
 86 
 87 .v-leave-to {
 88   opacity: 0;
 89   transform: translateX(-100%);
 90   position: absolute;
 91 }
 92 
 93 .v-enter-active,
 94 .v-leave-active {
 95   transition: all 0.5s ease;
 96 }
 97 
 98 // 该类名，解决 tabbar 点击无法切换的问题
 99 .mui-bar-tab .mui-tab-item-llb.mui-active {
100   color: #007aff;
101 }
102 
103 .mui-bar-tab .mui-tab-item-llb {
104   display: table-cell;
105   overflow: hidden;
106   width: 1%;
107   height: 50px;
108   text-align: center;
109   vertical-align: middle;
110   white-space: nowrap;
111   text-overflow: ellipsis;
112   color: #929292;
113 }
114 
115 .mui-bar-tab .mui-tab-item-llb .mui-icon {
116   top: 3px;
117   width: 24px;
118   height: 24px;
119   padding-top: 0;
120   padding-bottom: 0;
121 }
122 
123 .mui-bar-tab .mui-tab-item-llb .mui-icon ~ .mui-tab-label {
124   font-size: 11px;
125   display: block;
126   overflow: hidden;
127   text-overflow: ellipsis;
128 }
129 </style>

 

posted @ 2019-05-11 12:29  xx_sprog  阅读(1041)  评论(0)    收藏  举报