From 31aac1de4ad4f65768b5c2bfb32105f0674ce2ad Mon Sep 17 00:00:00 2001
From: ewall <1054064180@qq.com>
Date: Mon, 13 Aug 2018 12:00:17 +0800
Subject: [PATCH] 'add'

---
 README.md                 |  2 +-
 package.json              |  1 +
 src/view/classify.vue     | 39 +++++++++++++++++++++++++--------------
 static/mock/classify.json | 12 ++++++++++++
 4 files changed, 39 insertions(+), 15 deletions(-)

diff --git a/README.md b/README.md
index e65c0ab..d49711c 100644
--- a/README.md
+++ b/README.md
@@ -1 +1 @@
-分类详情页数据渲染
\ No newline at end of file
+分类详情页之better-scroll实现滚动
\ No newline at end of file
diff --git a/package.json b/package.json
index 72ba104..b851844 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,7 @@
   },
   "dependencies": {
     "axios": "^0.18.0",
+    "better-scroll": "^1.12.6",
     "less": "^3.0.4",
     "less-loader": "^4.1.0",
     "lib-flexible": "^0.3.2",
diff --git a/src/view/classify.vue b/src/view/classify.vue
index c43d3ef..7019457 100644
--- a/src/view/classify.vue
+++ b/src/view/classify.vue
@@ -9,22 +9,26 @@
     <!-- 主体 -->
     <div class="main" :style="{height:mainHeight}">
       <!-- 主体左侧 -->
-      <div class="mainLeft">
-        <div class="item" :class="currentIndex == index ? 'item_on' : ''" v-for="(item,index) in menuTitle" :key="item.id" @click="menuClick(index)">{{item.name}}</div>
+      <div class="mainLeft wrapper" ref="wrapper">
+        <div class="content">
+          <div class="item" :class="currentIndex == index ? 'item_on' : ''" v-for="(item,index) in menuTitle" :key="item.id" @click="menuClick(index)">{{item.name}}</div>
+        </div>
       </div>
       <!-- 主体右侧 -->
-      <div class="mainRight">
-        <!-- 顶部图 -->
-        <div class="display_img">
-          <img :src="menuDetail.topImg" />
-        </div>
-        <!-- 内容 -->
-        <div class="container" v-for="(item,index) in menuDetail.details" :key="index">
-          <div class="title">{{item.title}}</div>
-          <div class="content">
-            <div class="content_item" v-for="(item,index) in item.icon" :key="index">
-              <img :src="item.iconImg">
-              <div class="txt">{{item.name}}</div>
+      <div class="mainRight wrapper" ref="wrapper">
+        <div class="content">
+          <!-- 顶部图 -->
+          <div class="display_img">
+            <img :src="menuDetail.topImg" />
+          </div>
+          <!-- 内容 -->
+          <div class="container" v-for="(item,index) in menuDetail.details" :key="index">
+            <div class="title">{{item.title}}</div>
+            <div class="content">
+              <div class="content_item" v-for="(item,index) in item.icon" :key="index">
+                <img :src="item.iconImg">
+                <div class="txt">{{item.name}}</div>
+              </div>
             </div>
           </div>
         </div>
@@ -35,6 +39,7 @@
 
 <script>
 import axios from "axios";
+import BScroll from "better-scroll";
 
 export default {
   name: "classify",
@@ -54,6 +59,12 @@ export default {
   },
   mounted() {
     this.getClassify();
+    this.$nextTick(() => {
+      this.scroll = new BScroll(this.$refs.wrapper, {
+        bounce: false,
+        click: true
+      });
+    });
   },
   watch: {},
   computed: {},
diff --git a/static/mock/classify.json b/static/mock/classify.json
index d5dd6a6..16a82fa 100644
--- a/static/mock/classify.json
+++ b/static/mock/classify.json
@@ -53,6 +53,18 @@
         {
             "id": 8,
             "name": "超市"
+        },
+        {
+            "id": 13,
+            "name": "图书"
+        },
+        {
+            "id": 14,
+            "name": "家用电器"
+        },
+        {
+            "id": 15,
+            "name": "手机数码"
         }
     ],
     "content": {