betterScroll

liuqimichale
1 parent 120cce1d
Showing 3 changed files with 47 additions and 22 deletions
package-lock.json
package.json
src/views/mapsection.vue
@@ -1265,6 +1265,15 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "better-scroll": {
+      "version": "1.13.2",
+      "resolved": "http://registry.npm.taobao.org/better-scroll/download/better-scroll-1.13.2.tgz",
+      "integrity": "sha1-MebgiM8tI85I5S+tbMWRNP/rL1Y=",
+      "dev": true,
+      "requires": {
+        "babel-runtime": "^6.0.0"
+      }
+    },
     "bfj-node4": {
       "version": "5.3.1",
       "resolved": "http://registry.npm.taobao.org/bfj-node4/download/bfj-node4-5.3.1.tgz",
@@ -25,6 +25,7 @@
     "babel-plugin-transform-vue-jsx": "^3.5.0",
     "babel-preset-env": "^1.3.2",
     "babel-preset-stage-2": "^6.22.0",
+    "better-scroll": "^1.13.2",
     "chalk": "^2.0.1",
     "copy-webpack-plugin": "^4.0.1",
     "css-loader": "^0.28.11",
@@ -35,14 +35,18 @@
         <li>正常</li>
         <li>空闲</li>
       </ul>
-      <ul class="park-wrap">
-        <li v-for="(item, index) in parkList" :key="index" :title="item.name" :class="{'current-active':index===currentIndex}" @click="currentPark(item, index)">{{ item.name }}</li>
-      </ul>
+      <div class="park-wrap" ref="parkwrap">
+          <ul class="content" ref="">
+            <li v-for="(item, index) in parkList" :key="index" :title="item.name" :class="{'current-active':index===currentIndex}" @click="currentPark(item, index)">{{ item.name }}</li>
+          </ul>
+      </div>
       <div class="flexfm" ></div>
     </div>
 </template>
  
 <script>
+import BScroll from 'better-scroll'
+
 export default {
   name: 'mapsection',
   data() {
@@ -69,8 +73,14 @@ export default {
       currentIndex:0
     }
   },
-  created() {
-
+  mounted() {
+    this.$nextTick(() => {
+      this.scroll = new BScroll(this.$refs.parkwrap,{
+        scrollbars:true,//显示滚动条（默认是false不显示）
+        mouseWheel:true,//支持鼠标触发区域滚动
+        bounce:true,//取消达到边界的缓冲效果
+      })
+    })
   },
   methods: {
     currentPark(item, index) {
@@ -159,23 +169,28 @@ export default {
     bottom: 11px;
     background-color: #0D3689;
     font-size: 12px;
-    overflow-y: auto;
-    li{
-      padding-left: 26px;
-      height: 20px;
-      line-height: 20px;
-      color:rgba(255,255,255,.7);
-      background-image:url("../assets/img/office-icon.png");
-      background-repeat: no-repeat;
-      background-position: 9px center;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      cursor: pointer;
-    }
-    .current-active{
-      color:rgba(255,255,255,1);
-      background-image:url("../assets/img/officeactive-icon.png");
+    overflow: hidden;
+
+    .content{
+      height:100%;
+      li{
+        padding-left: 26px;
+        height: 20px;
+        line-height: 20px;
+        color:rgba(255,255,255,.7);
+        background-image:url("../assets/img/office-icon.png");
+        background-repeat: no-repeat;
+        background-position: 9px center;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        cursor: pointer;
+      }
+      .current-active{
+        color:rgba(255,255,255,1);
+        background-image:url("../assets/img/officeactive-icon.png");
+      }
     }
+
   }
 </style>