YuJian
/
Storyofvue
Archived
1
0
Fork 0
Code Releases Activity
Browse Source

search final

city-search-logic
遇见 5 years ago
parent
4171d38efb
commit
382ac97548
6 changed files with 95 additions and 17 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 3
      index.html
  2. 2
      src/pages/city/City.vue
  3. 6
      src/pages/city/components/Alphabet.vue
  4. 9
      src/pages/city/components/list.vue
  5. 87
      src/pages/city/components/search.vue
  6. 5
      src/pages/home/home.vue

3
index.html
Unescape View File

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

2
src/pages/city/City.vue
Unescape View File

@ -1,7 +1,7 @@
<template> <template>
<div> <div>
<city-header></city-header> <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-list :cities="cities" :hot="hotCities" :letter="letter"></city-list>
<city-alphabet <city-alphabet
:cities="cities" :cities="cities"

6
src/pages/city/components/Alphabet.vue
Unescape View File

@ -70,8 +70,10 @@ export default {
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~styles/variable.styl' @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 .list
display flex display flex
flex-direction column flex-direction column
@ -85,4 +87,4 @@ export default {
line-height .4rem line-height .4rem
text-align center text-align center
color $bgColor color $bgColor
</style> </style>

9
src/pages/city/components/list.vue
Unescape View File

@ -1,4 +1,4 @@
<template class="layout"> <template>
<div class="list" ref="wrapper"> <div class="list" ref="wrapper">
<div> <div>
<div class="area"> <div class="area">
@ -34,13 +34,6 @@
</template> </template>
<script scoped> <script scoped>
// document.body.addEventListener(
// "touchmove",
// function(e) {
// e.preventDefault(); //阻止默认的处理方式(阻止下拉滑动的效果)
// },
// { passive: false }
// ); //passive 参数不能省略，用来兼容ios和android
import BScroll from "better-scroll"; import BScroll from "better-scroll";
export default { export default {
name: "CityList", name: "CityList",

87
src/pages/city/components/search.vue
Unescape View File

@ -1,17 +1,84 @@
<template> <template>
<div class="search"> <div>
<input class="search-input" type="text" placeholder="输入城市名或拼音" /> <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> </div>
</template> </template>
<script> <script>
import BSorll from "better-scroll";
export default { 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> </script>
<style lang="stylus" scoped> <style lang="stylus" scoped>
@import '~styles/variable.styl' @import '~styles/variable.styl'
*
touch-action none
.search .search
height .72rem height .72rem
padding 0 .1rem padding 0 .1rem
@ -25,4 +92,18 @@ export default {
text-align center text-align center
border-radius .06rem border-radius .06rem
color #666666 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> </style>

5
src/pages/home/home.vue
Unescape View File

@ -60,4 +60,7 @@ export default {
}; };
</script> </script>
<style></style> <style lang="stylus">
.HomeF
overflow: hidden;
</style>