vue-music 关于Search(搜索页面)-- 搜索结果优化
Posted catbrother
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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.vue if(this.beforeScroll){ this.scroll.on(‘beforeScrollStart‘,()=>{ this.$emit(‘beforeScroll‘) }) } // search-box.vue blur(){ this.$refs.query.blur(); console.log("失焦") } //search.vue blurInput(){ this.$refs.searchBox.blur(); }
以上是关于vue-music 关于Search(搜索页面)-- 搜索结果优化的主要内容,如果未能解决你的问题,请参考以下文章
vue-music 关于Search(搜索页面)--上拉加载
vue-music 关于Search(搜索页面)-- 搜索结果优化