'add'

README.md

@@ -1 +1 @@
-分类详情页数据渲染
+分类详情页之better-scroll实现滚动

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",

src/view/classify.vue

@@ -9,11 +9,14 @@
     <!-- 主体 -->
     <div class="main" :style="{height:mainHeight}">
       <!-- 主体左侧 -->
-      <div class="mainLeft">
+      <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="mainRight wrapper" ref="wrapper">
+        <div class="content">
           <!-- 顶部图 -->
           <div class="display_img">
             <img :src="menuDetail.topImg" />
@@ -31,10 +34,12 @@
         </div>
       </div>
     </div>
+  </div>
 </template>
 
 <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: {},

static/mock/classify.json

@@ -53,6 +53,18 @@
         {
             "id": 8,
             "name": "超市"
+        },
+        {
+            "id": 13,
+            "name": "图书"
+        },
+        {
+            "id": 14,
+            "name": "家用电器"
+        },
+        {
+            "id": 15,
+            "name": "手机数码"
         }
     ],
     "content": {