点击菜单

1. 当前项高亮
2. 右侧切换到对应项

src/pages/category/category.vue

@@ -9,7 +9,7 @@
     <view class="category_content">
       <!-- 2.1 左列表: 大家电,热门推荐,海外购... -->
       <view class="menu">
-        <view class="menu_list" v-for="item in menu" :key="item">{{item}}</view>
+        <view @tap="onMenuTap(index)" :class="['menu_list', menuCurrent===index?'active':'']" v-for="(item,index) in menus" :key="item">{{item}}{{index}}</view>
       </view>
       <!-- 2.2 右列表: 电视,空调... -->
       <view class="category_list">
@@ -30,16 +30,17 @@
 </template>
 
 <script>
+// 完整的数据存在全局, 因为标签渲染用不到, 所以不存在data, 能提高性能
 let categoryData = {}
 export default {
   data(){
     return{
       // 左列表
-      menu:[],
+      menus:[],
       // 当前左列表选中项
       menuCurrent: 0,
       // 右列表
-      goods: []
+      goods: [],
     }
   },
   onLoad(){
@@ -49,13 +50,20 @@ export default {
     // 获取详情信息
     async getCategories(){
       const { message } = await this.$u.api.getCategories()
+      // 把接口所有的数据存到全局变量上
       categoryData = message
-      console.log(message);
+      console.log(categoryData);
-      this.menu = message.map(v=>(v.cat_name))
+      // 左列表获取
-      console.log(this.menu)
+      this.menus = message.map(v=>(v.cat_name))
+      // console.log(this.menu)
+      // 右列表获取
       this.goods = message[this.menuCurrent].children
       console.log(this.goods);
     },
+    onMenuTap(menuCurrent) {
+      this.menuCurrent = menuCurrent
+      this.goods = categoryData[menuCurrent].children
+    }
   }
 
 }