搜索结果 列表点击跳转到相应的歌手详情页或者 歌曲页面, 通过子路由跳转, 和 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();
- }
来源: http://www.bubuko.com/infodetail-2643143.html