search final

5 years ago · 382ac97548
6 changed files with 95 additions and 17 deletions
--- a/index.html
+++ b/index.html
@ -3,8 +3,7 @@
				@@ -3,8 +3,7 @@

 <head>
    <meta charset="utf-8">
-    <meta name="viewport"
-        content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title>Storyofvue</title>
 </head>

--- a/src/pages/city/City.vue
+++ b/src/pages/city/City.vue
@ -1,7 +1,7 @@
				@@ -1,7 +1,7 @@
 <template>
  <div>
    <city-header></city-header>
-    <city-search></city-search>
+    <city-search :cities="cities"></city-search>
    <city-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
    <city-alphabet
      :cities="cities"
--- a/src/pages/city/components/Alphabet.vue
+++ b/src/pages/city/components/Alphabet.vue
@ -70,8 +70,10 @@ export default {
				@@ -70,8 +70,10 @@ export default {

 <style lang="stylus" scoped>
@import '~styles/variable.styl'
+// 应用 CSS 属性 touch-action: none; 这样任何触摸事件都不会产生默认行为，但是 touch 事件照样触发。
+//  https://blog.csdn.net/lijingshan34/article/details/88350456
 *
-  touch-action: pan-y
+  touch-action: none
 .list
  display flex
  flex-direction column
@ -85,4 +87,4 @@ export default {
				@@ -85,4 +87,4 @@ export default {
    line-height .4rem
    text-align center
    color $bgColor
-</style>
+</style>
--- a/src/pages/city/components/list.vue
+++ b/src/pages/city/components/list.vue
@ -1,4 +1,4 @@
				@@ -1,4 +1,4 @@
-<template class="layout">
+<template>
  <div class="list" ref="wrapper">
    <div>
      <div class="area">
@ -34,13 +34,6 @@
				@@ -34,13 +34,6 @@
 </template>

 <script scoped>
-// document.body.addEventListener(
-//   "touchmove",
-//   function(e) {
-//     e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
-//   },
-//   { passive: false }
-// ); //passive 参数不能省略，用来兼容ios和android
 import BScroll from "better-scroll";
 export default {
  name: "CityList",
--- a/src/pages/city/components/search.vue
+++ b/src/pages/city/components/search.vue
@ -1,17 +1,84 @@
				@@ -1,17 +1,84 @@
 <template>
-  <div class="search">
-    <input class="search-input" type="text" placeholder="输入城市名或拼音" />
+  <div>
+    <div class="search">
+      <input
+        v-model="keyword"
+        class="search-input"
+        type="text"
+        placeholder="输入城市名或拼音"
+      />
+    </div>
+    <div class="search-content" ref="search" v-show="keyword">
+      <ul>
+        <li
+          class="search-item border-bottom"
+          v-for="item of list"
+          :key="item.id"
+        >
+          {{ item.name }}
+        </li>
+        <li class="search-item border-bottom" v-show="hasNoData">
+          没有找到匹配数据
+        </li>
+      </ul>
+    </div>
  </div>
 </template>

 <script>
+import BSorll from "better-scroll";
 export default {
-  name: "CitySearch"
+  name: "CitySearch",
+  props: {
+    cities: Object
+  },
+  data: function() {
+    return {
+      keyword: "",
+      list: [],
+      timer: null
+    };
+  },
+  computed: {
+    hasNoData: function() {
+      return !this.list.length;
+    }
+  },
+  watch: {
+    keyword: function() {
+      if (this.timer) {
+        clearTimeout(this.timer);
+      }
+      if (!this.keyword) {
+        this.list = [];
+        return;
+      }
+      this.timer = setTimeout(() => {
+        const result = [];
+        for (let i in this.cities) {
+          this.cities[i].forEach(value => {
+            if (
+              value.spell.indexOf(this.keyword) > -1 ||
+              value.name.indexOf(this.keyword) > -1
+            ) {
+              result.push(value);
+            }
+          });
+        }
+        this.list = result;
+      }, 100);
+    }
+  },
+  mounted: function() {
+    this.BSorll = new BSorll(this.$refs.search);
+  }
 };
 </script>

 <style lang="stylus" scoped>
@import '~styles/variable.styl'
+*
+  touch-action none
 .search
  height .72rem
  padding 0 .1rem
@ -25,4 +92,18 @@ export default {
				@@ -25,4 +92,18 @@ export default {
    text-align center
    border-radius .06rem
    color #666666
+.search-content
+  z-index 1
+  overflow hidden
+  position absolute
+  top 1.58rem
+  left 0
+  right 0
+  bottom 0
+  background #eeeeee
+  .search-item
+    line-height .62rem
+    padding-left .2rem
+    background #ffffff
+    color #666666
 </style>
--- a/src/pages/home/home.vue
+++ b/src/pages/home/home.vue
@ -60,4 +60,7 @@ export default {
				@@ -60,4 +60,7 @@ export default {
 };
 </script>

-<style></style>
+<style lang="stylus">
+.HomeF
+  overflow: hidden;
+</style>