perfomance

src/pages/city/City.vue

@@ -2,8 +2,11 @@
   <div>
     <city-header></city-header>
     <city-search></city-search>
-    <city-list :cities="cities" :hot="hotCities"></city-list>
-    <city-alphabet :cities="cities"></city-alphabet>
+    <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
+    <city-alphabet
+      :cities="cities"
+      @Change="handleLetterChange"
+    ></city-alphabet>
   </div>
 </template>
 
@@ -25,7 +28,8 @@ export default {
   data: function() {
     return {
       cities: {},
-      hotCities: []
+      hotCities: [],
+      letter: ""
     };
   },
   methods: {
@@ -39,6 +43,9 @@ export default {
         this.cities = data.cities;
         this.hotCities = data.hotCities;
       }
+    },
+    handleLetterChange: function(Letter) {
+      this.letter = Letter;
     }
   },
   mounted: function() {

src/pages/city/components/Alphabet.vue

@@ -1,20 +1,77 @@
 <template>
   <ul class="list">
-    <li class="item" v-for="(item, key) of cities" :key="key">{{ key }}</li>
+    <li
+      class="item"
+      v-for="item of letters"
+      :key="item"
+      :ref="item"
+      @touchstart="handleTouchStart"
+      @touchmove="handleTouchMove"
+      @touchend="handleTouchEnd"
+      @click="handleLetterClick"
+    >
+      {{ item }}
+    </li>
   </ul>
 </template>
 
 <script>
 export default {
+  name: "CityAlphabet",
   props: {
     cities: Object
   },
-  name: "CityAlphabet"
+  data() {
+    return {
+      touchStatus: false,
+      startY: 0,
+      timer: null
+    };
+  },
+  updata: function() {
+    this.startY = this.$refs["A"][0].offsetTop;
+  },
+  computed: {
+    letters: function() {
+      const letters = [];
+      for (let i in this.cities) {
+        letters.push(i);
+      }
+      return letters;
+    }
+  },
+  methods: {
+    handleLetterClick: function(e) {
+      this.$emit("Change", e.target.innerText);
+    },
+    handleTouchStart: function() {
+      this.touchStatus = true;
+    },
+    handleTouchMove: function(e) {
+      if (this.touchStatus) {
+        if (this.timer) {
+          clearTimeout(this.timer);
+        }
+        this.timer = setTimeout(() => {
+          const touchY = e.touches[0].clientY - 79;
+          const index = Math.floor((touchY - this.startY) / 20);
+          if (index >= 0 && index < this.letters.length){
+            this.$emit("Change", this.letters[index]);
+          }
+        }, 16);
+      }
+    },
+    handleTouchEnd: function() {
+      this.touchStatus = false;
+    }
+  }
 }
 </script>
 
 <style lang="stylus" scoped>
 @import '~styles/variable.styl'
+*
+  touch-action: pan-y
 .list
   display flex
   flex-direction column

src/pages/city/components/list.vue

@@ -1,4 +1,4 @@
-<template>
+<template class="layout">
   <div class="list" ref="wrapper">
     <div>
       <div class="area">
@@ -17,7 +17,7 @@
           </div>
         </div>
       </div>
-      <div class="area" v-for="(item, key) of cities" :key="key">
+      <div class="area" v-for="(item, key) of cities" :key="key" :ref="key">
         <div class="title border-topbottom">{{ key }}</div>
         <div class="item-list">
           <div
@@ -33,16 +33,32 @@
   </div>
 </template>
 
-<script>
+<script scoped>
+// document.body.addEventListener(
+//   "touchmove",
+//   function(e) {
+//     e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
+//   },
+//   { passive: false }
+// ); //passive 参数不能省略，用来兼容ios和android
 import BScroll from "better-scroll";
 export default {
   name: "CityList",
   props: {
     hot: Array,
-    cities: Object
+    cities: Object,
+    letter: String
   },
   mounted: function() {
     this.BScroll = new BScroll(this.$refs.wrapper);
+  },
+  watch: {
+    letter: function() {
+      if (this.letter) {
+        const element = this.$refs[this.letter][0];
+        this.BScroll.scrollToElement(element);
+      }
+    }
   }
 };
 </script>