From 25610727b7d0d3dfed6025f9cb9dd01fe237df58 Mon Sep 17 00:00:00 2001
From: "jqtmviyu@gmail.com" <jqtmviyu@gmail.com>
Date: Thu, 25 Feb 2021 10:42:23 +0800
Subject: [PATCH] =?UTF-8?q?=E7=82=B9=E5=87=BB=E8=8F=9C=E5=8D=95=201.=20?=
 =?UTF-8?q?=E5=BD=93=E5=89=8D=E9=A1=B9=E9=AB=98=E4=BA=AE=202.=20=E5=8F=B3?=
 =?UTF-8?q?=E4=BE=A7=E5=88=87=E6=8D=A2=E5=88=B0=E5=AF=B9=E5=BA=94=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/category/category.vue | 20 ++++++++++++++------
 1 file changed, 14 insertions(+), 6 deletions(-)

diff --git a/src/pages/category/category.vue b/src/pages/category/category.vue
index 30a854e..c2dbc51 100644
--- a/src/pages/category/category.vue
+++ b/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);
-      this.menu = message.map(v=>(v.cat_name))
-      console.log(this.menu)
+      console.log(categoryData);
+      // 左列表获取
+      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
+    }
   }
 
 }