city-list Final

package-lock.json

@@ -2128,6 +2128,27 @@
         "object.assign": "^4.1.0"
       }
     },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npm.taobao.org/babel-runtime/download/babel-runtime-6.26.0.tgz",
+      "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "core-js": {
+          "version": "2.6.11",
+          "resolved": "https://registry.npm.taobao.org/core-js/download/core-js-2.6.11.tgz?cache=0&sync_timestamp=1578957006406&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fcore-js%2Fdownload%2Fcore-js-2.6.11.tgz",
+          "integrity": "sha1-OIMUafmSK97Y7iHJ3EaYXgOZMIw="
+        },
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npm.taobao.org/regenerator-runtime/download/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha1-vgWtf5v30i4Fb5cmzuUBf78Z4uk="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.0",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.0.tgz",
@@ -2209,6 +2230,14 @@
         "tweetnacl": "^0.14.3"
       }
     },
+    "better-scroll": {
+      "version": "1.15.2",
+      "resolved": "https://registry.npm.taobao.org/better-scroll/download/better-scroll-1.15.2.tgz?cache=0&sync_timestamp=1582295714459&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbetter-scroll%2Fdownload%2Fbetter-scroll-1.15.2.tgz",
+      "integrity": "sha1-Zf/GBYuLT/M3uN+tS8szTXaZzrY=",
+      "requires": {
+        "babel-runtime": "^6.0.0"
+      }
+    },
     "bfj": {
       "version": "6.1.2",
       "resolved": "https://registry.npm.taobao.org/bfj/download/bfj-6.1.2.tgz",

package.json

@@ -9,6 +9,7 @@
   },
   "dependencies": {
     "axios": "^0.19.2",
+    "better-scroll": "^1.15.2",
     "core-js": "^3.6.4",
     "fastclick": "^1.0.6",
     "path": "^0.12.7",

src/pages/city/City.vue

@@ -3,19 +3,22 @@
     <city-header></city-header>
     <city-search></city-search>
     <city-list></city-list>
+    <city-alphabet></city-alphabet>
   </div>
 </template>
 
 <script>
 import CityHeader from "./components/header";
 import CitySearch from "./components/search";
-import CityList from "./components/list"
+import CityList from "./components/list";
+import CityAlphabet from "./components/Alphabet";
 export default {
   name: "City",
   components: {
     CityHeader: CityHeader,
     CitySearch: CitySearch,
-    CityList: CityList
+    CityList: CityList,
+    CityAlphabet: CityAlphabet
   }
 }
 </script>

src/pages/city/components/Alphabet.vue

@@ -0,0 +1,36 @@
+<template>
+  <ul class="list">
+    <li class="item">A</li>
+    <li class="item">A</li>
+    <li class="item">A</li>
+    <li class="item">A</li>
+    <li class="item">A</li>
+    <li class="item">A</li>
+    <li class="item">A</li>
+    <li class="item">A</li>
+    <li class="item">A</li>
+  </ul>
+</template>
+
+<script>
+export default {
+  name: "CityAlphabet"
+}
+</script>
+
+<style lang="stylus" scoped>
+@import '~styles/variable.styl'
+.list
+  display flex
+  flex-direction column
+  justify-content center
+  position absolute
+  top 1.58rem
+  right 0
+  bottom 0
+  width .4rem
+  .item
+    line-height .4rem
+    text-align center
+    color $bgColor
+</style>

src/pages/city/components/list.vue

@@ -31,8 +31,12 @@
 </template>
 
 <script>
+import BScroll from "better-scroll";
 export default {
-  name: "CityList"
+  name: "CityList",
+  mounted: function() {
+    this.BScroll = new BScroll(this.$refs.wrapper);
+  }
 };
 </script>