Vue音乐--搜索页面13_优化

最新推荐文章于 2023-07-15 17:18:21 发布

「已注销」

最新推荐文章于 2023-07-15 17:18:21 发布

阅读量492

点赞数

分类专栏：移动端音乐项目文章标签： vue scroll 移动端

本文链接：https://blog.youkuaiyun.com/kingAn123/article/details/83016268

版权

移动端音乐项目专栏收录该内容

21 篇文章

订阅专栏

该博客详细介绍了Vue音乐应用中搜索页面的优化过程，包括搜索历史和热门搜索的滚动功能实现，小播放组件的适配，搜索输入框的节流设置，以及在移动端如何在滚动搜索结果列表时自动收起键盘。优化步骤清晰，涉及到计算属性、mixin方法和事件处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

十三、优化

要点：
- 搜索历史和热门搜索添加滚动
- 适配小播放组件
- 搜索输入框节流设置
- 滚动搜索结果列表，收起手机端输入键盘

（一）、搜索历史和热门搜索添加滚动

在search.vue中为2个组件外包一个div再添加滚动组件

<scroll  ref="scroll" :data="shortcut">
	<div class="search-scroll">
		<!--热门搜索关键词组件-->
		<search-hotkey></search-hotkey>
		<!--搜索历史列表组件-->
		<search-history></search-history>
	</div>
</scroll>

滚动组件传入数据，来实时刷新dom滚动
但是这里的数据，包括了热门搜索和本地缓存了，热门搜索是异步的，因此数据，在计算属性中得

  computed:{
    shortcut(){
      //因为要监听热门关键词数据和搜索结果数据，而且是异步的
      return this.hotKey.concat(this.searchHistory)
    },

（二）、适配小播放组件

使用mixin方法

import {playlistMixin} from '@/common/js/mixin' //引入mixin重复方法

mixins:[playlistMixin],

/******mixin方法引入************/
    handlePlaylist(playlist){
      const bottom = playlist.length>0 ? '60px':''
        this.$refs.scroll.$el.style.bottom = bottom
        this.$refs.scroll.refresh()
    },

（三）、搜索输入框节流设置

见往期文章

（四）、滚动搜索结果列表，收起手机端输入键盘

在输入框组件中，使用input的dom的原生方法blur即可，这里注意事件派发，
在滚动前收起

/*********设置方法给父组件调用***********************/
    blur(){
      this.$refs.queryinput.blur()
    }

在滚动前收起，使用scroll组件的滚动前事件
scroll.vue

props:{
//开启滚动前事件，用于收起键盘
    beforScoll:{
      type:Boolean,
      default:false
    },
}
	//开启滚动前事件收起键盘
      if(this.beforScoll){
        this.scroll.on('beforScollStart',()=>{
          this.$emit('beforScoll')
        })
      }