vue-music 关于Search（搜索页面）-- 搜索结果优化

提示：扫一扫查出行
【扫一扫了解最新限行尾号】
复制提示

搜索结果列表点击跳转到相应的歌手详情页或者歌曲页面，通过子路由跳转，和singer 组件一样

在suggest.vue 组件判断如果点击的是歌手，则new 一个歌手对象，通过这个对象的id 属性值传递给路由的参数，通过vuex 传递歌手数据

<li class="suggest-item" v-for="item in result" @click="selectItem(item)">selectItem(item){
if(item.type === TYPE_SINGER){
let singer = new Singer({
id:item.singermid,
name:item.singername
})
this.$router.push({
path:`/search/${singer.id}`
})
this.setSinger(singer)
}else{
...//歌曲点击逻辑
}
},

歌曲点击的逻辑和之前选择歌手点击列表逻辑不同，之前是改变所有的playlist 列表，而搜索出来的列表点击只需要向当前playlist 列表添加一首即可，不需要改变整个playlist 播放列表

点击添加一首歌需要更改操作三个状态，在actives.js 中写相关commit insetSong 函数插入一首搜索结果的歌曲，然后判断与原来的播放列表中是否有这首歌曲，如果有则删除，更新playlist 和 sequenceList 列表

export const insertSong = function ({commit,state},song){
let playlist = state.playlist.slice();
let sequenceList = state.sequenceList.slice();
let currentIndex = state.currentIndex; //记录当前歌曲
let currentSong = playlist[currentIndex];
// 查找当前列表中是否有待插入的歌曲并返回其索引
let fpIndex = findIndex(playlist, song)
// 因为是插入歌曲，所以索引+1
currentIndex++
// 插入这首歌到当前索引位置
playlist.splice(currentIndex, 0, song)
// 如果已经包含了这首歌
if (fpIndex > -1) {
// 如果当前插入的序号大于列表中的序号
if (currentIndex > fpIndex) {
playlist.splice(fpIndex, 1)
currentIndex--
} else {
playlist.splice(fpIndex + 1, 1)
}
} let currentSIndex = findIndex(sequenceList, currentSong) + 1
let fsIndex = findIndex(sequenceList, song)
sequenceList.splice(currentSIndex, 0, song)
if (fsIndex > -1) {
if (currentSIndex > fsIndex) {
sequenceList.splice(fsIndex, 1)
} else {
sequenceList.splice(fsIndex + 1, 1)
}
}
commit(types.SET_PLAYLIST, playlist)
commit(types.SET_SEQUENCE_LIST, sequenceList)
commit(types.SET_CURRENT_INDEX, currentIndex)
commit(types.SET_FULL_SCREEN, true)
commit(types.SET_PLAYING_STATE, true)
}

边界处理。如果搜索无结果，显示no-result 组件，当前搜索输入框每一次输入时都会监听query 变化去请求，从源头做节流函数延时200 毫秒去监听请求,减少发无效的请求

export function debounce(func, delay) { //函数科里化
let timer return function (...args) {
if (timer) {
clearTimeout(timer)
}
timer = setTimeout(() => {
func.apply(this, args)
}, delay)
}
}

import {debounce} from 'common/js/util.js'created(){
this.$watch('query',debounce((newQuery) => {
this.$emit('query',newQuery);
},200))
},

在手机端当搜索完成滚动搜索列表时，底部的软键盘会当住滚动列表，要做的就是在监听scroll 滚动的时候让input 失去焦点

首先在scroll 上新增beforeScroll事件监听beforeScrollStart 滚动开始事件，去派发一个事件。然后在搜索结果列表监听派发事件，再次派发给search 组件

在searchbox 组件里给input 设置失去焦点 blur 函数。search组件中监听搜索列表派发事件调用 this.$refs.searchBox.blur(); 设置失焦

// scroll.vueif(this.beforeScroll){
this.scroll.on('beforeScrollStart',()=>{
this.$emit('beforeScroll')
})
}// search-box.vueblur(){
this.$refs.query.blur();
console.log("失焦")
}//search.vueblurInput(){
this.$refs.searchBox.blur();
}