Skip to content
This repository was archived by the owner on May 11, 2021. It is now read-only.

Commit e7e0b8e

Browse files
lbwalbwa
committed
完成 - 搜索组件
1 parent ff7bf8a commit e7e0b8e

File tree

4 files changed

+74
-32
lines changed

4 files changed

+74
-32
lines changed

‎index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
<html>
33
<head>
44
<meta charset="utf-8">
5+
<meta name="apple-mobile-web-app-capable" content="yes">
56
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
67
<title>vue-sonar</title>
78
</head>

‎src/common/js/cache.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
* 2. 除非将整个 state 对象包裹在异步函数中，否则 state 中依赖 localStorage 的值属性
77
* 无法异步被赋值为 localStorage 的值，故弃用，转而使用 store.js 进行同步存储和读取数
88
* 据
9-
* 3. 个人认为将 state 包裹在回调中略丑陋，不够简洁
9+
* 3. 个人认为将 state 包裹在回调中，代码相对于同步取值来说不够简洁
1010
*/
1111

1212
import localStorage from 'store/dist/store.modern'

‎src/components/parts-search-result/parts-search-result.vue‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@
2020
<p class="text" v-html="getDisplayName(item)"></p>
2121
</div>
2222
</li>
23-
<BaseLoading v-show="hasMore" title=""/>
23+
<BaseLoading v-show="hasMore" title="加载中..."/>
2424
</ul>
2525

2626
<div class="no-result-wrapper" v-show="!hasMore && !searchResult.length">
@@ -66,6 +66,10 @@ export default {
6666
},
6767
6868
methods: {
69+
refreshScroll () {
70+
this.$refs.scroll.refresh()
71+
},
72+
6973
listScrolling () {
7074
this.$emit('listScrolling')
7175
},

‎src/components/the-search/search.vue‎

Lines changed: 67 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -6,41 +6,44 @@
66
/>
77
</div>
88

9-
<div class="shortcut-wrapper" v-show="!queryKey">
10-
<div class="shortcut">
11-
<div class="hot-key">
12-
<h1 class="title">热门搜索</h1>
13-
<ul>
14-
<li
15-
class="hot-key-item"
16-
v-for="(key, index) of hotKey"
17-
:key="index"
18-
@click="selectQueryRecord(key.k)"
19-
>
20-
<span>{{ key.k }}</span>
21-
</li>
22-
</ul>
9+
<div class="shortcut-wrapper" ref="shortcutWrapper" v-show="!queryKey">
10+
<BaseScroll class="shortcut" ref="scroll" :data="scrollDependence">
11+
<div class="scroll-wrapper">
12+
<div class="hot-key">
13+
<h1 class="title">热门搜索</h1>
14+
<ul>
15+
<li
16+
class="hot-key-item"
17+
v-for="(key, index) of hotKey"
18+
:key="index"
19+
@click="selectQueryRecord(key.k)"
20+
>
21+
<span>{{ key.k }}</span>
22+
</li>
23+
</ul>
24+
</div>
25+
26+
<div class="search-history" v-show="searchHistory.length">
27+
<h1 class="title">
28+
<span class="text">搜索历史</span>
29+
<span class="clear-btn" @click.stop="showConfirmBtn">
30+
<i class="icon-clear"></i>
31+
</span>
32+
</h1>
33+
<BaseSearchList
34+
:searchData="searchHistory"
35+
@selectItem="selectQueryRecord"
36+
@deleteItem="deleteSearchHistory"
37+
/>
38+
</div>
2339
</div>
24-
25-
<div class="search-history" v-show="searchHistory.length">
26-
<h1 class="title">
27-
<span class="text">搜索历史</span>
28-
<span class="clear-btn" @click.stop="showConfirmBtn">
29-
<i class="icon-clear"></i>
30-
</span>
31-
</h1>
32-
<BaseSearchList
33-
:searchData="searchHistory"
34-
@selectItem="selectQueryRecord"
35-
@deleteItem="deleteSearchHistory"
36-
/>
37-
</div>
38-
</div>
40+
</BaseScroll>
3941
</div>
4042

4143
<PartsResult
4244
@listScrolling="blurInputBox"
4345
@selectQuery="saveSearchItem"
46+
ref="resultList"
4447
:query="queryKey"
4548
v-show="queryKey"
4649
/>
@@ -51,7 +54,7 @@
5154
confirmBtnText="清空"
5255
@confirmSubmit="clearAllHistory"
5356
/>
54-
<!-- 可监听 confirmCancel 事件用于统计逻辑 -->
57+
<!-- 可监听 confirmCancel 事件用于统计点击取消的逻辑 -->
5558

5659
<router-view/>
5760
</div>
@@ -61,12 +64,16 @@
6164
import BaseSearchBox from 'base/base-search-box'
6265
import BaseSearchList from 'base/base-search-list'
6366
import BaseConfirm from 'base/base-confirm'
67+
import BaseScroll from 'base/base-scroll'
6468
import PartsResult from 'components/parts-search-result/parts-search-result'
6569
import { getHotKey } from 'api/the-search'
6670
import { ERR_OK } from 'api/config'
6771
import { mapActions, mapGetters } from 'vuex'
72+
import { playlistMixin } from 'common/js/mixin'
6873
6974
export default {
75+
mixins: [playlistMixin],
76+
7077
data () {
7178
return {
7279
placeholder: '搜索歌曲、歌手',
@@ -76,12 +83,25 @@ export default {
7683
},
7784
7885
computed: {
86+
scrollDependence () { // 用于 scroll 的刷新，当两个依赖变化时，重新计算
87+
return [...this.hotKey, ...this.searchHistory]
88+
},
89+
7990
...mapGetters([
8091
'searchHistory'
8192
])
8293
},
8394
8495
methods: {
96+
handlePlaylist (playlist) {
97+
const bottom = this.playlist.length > 0 ? '60px' : ''
98+
99+
this.$refs.shortcutWrapper.style.bottom = bottom // 历史记录页
100+
this.$refs.resultList.$el.style.bottom = bottom // 搜索结果页
101+
this.$refs.scroll.refresh()
102+
this.$refs.resultList.refreshScroll()
103+
},
104+
85105
showConfirmBtn () {
86106
this.$refs.confirm.showConfirm()
87107
},
@@ -124,6 +144,22 @@ export default {
124144
])
125145
},
126146
147+
watch: {
148+
/**
149+
* 1. 解决的问题：添加一条新的搜索结果后（此时页面刚好达到能滚动的位置），从结果页
150+
* 退回到搜索页面时，不能滚动。
151+
* 2。 监听 queryKey,此时的 queryKey 是一个从有到无的变化
152+
*/
153+
queryKey (newQuery) {
154+
if (!newQuery) {
155+
// setTimeout 是 this.$nextTick 的另一种实现
156+
setTimeout(() => {
157+
this.$refs.scroll.refresh()
158+
}, 20)
159+
}
160+
}
161+
},
162+
127163
created () {
128164
this._getHotKey()
129165
},
@@ -132,6 +168,7 @@ export default {
132168
BaseSearchBox,
133169
BaseSearchList,
134170
BaseConfirm,
171+
BaseScroll,
135172
PartsResult
136173
}
137174
}

0 commit comments

Comments
 (0)