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

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

「已注销」

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

阅读量460

点赞数

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

本文链接：https://blog.csdn.net/kingAn123/article/details/83016268

版权

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

摘要由CSDN通过智能技术生成

大概步骤：

在这里插入图片描述

目标效果

在这里插入图片描述

十三、优化

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

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

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

<scroll  ref="scroll" :data="shortcut">
	<div class="search-scroll">
		<!--热门搜索关键词组件-->

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

「已注销」

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

【音乐App】—— Vue-music 项目学习笔记：搜索页面开发

柳柳66的博客

12-27

909

【音乐App】—— Vue-music 项目学习笔记：搜索页面开发前言：以下内容均为学习慕课网高级实战课程的实践爬坑笔记。项目github地址：https://github.com/66Web/ljq_vue_music，欢迎Star。搜索歌手歌曲搜索历史保存一、搜索页面布局...

Vue音乐播放和搜索

cuk5239的博客

07-20

326

Vue音乐 (Vue music) For detailed explanation on how things work, checkout the guide and docs for vue-loader. 有关工作原理的详细说明，请查看vue-loader的指南和文档。现场演示 (Live demo) http://sioxas.github.io/ http://sioxas...

参与评论您还未登录，请先登录后发表或查看评论

vue慕课网音乐项目手记：43-搜索页面的数据获取以及使用

simoon's的博客

05-26

711

第一步：search组件里面监听search-box的query的变化： <search-box ref="searchBox" @query="changeQuery"></search-box> data里面定义一个query query: '' 然后，如果query发生改变，就赋值给query changeQuery (query) { ...

Vue-案例（搜索页面）

若叶知秋的博客

11-13

4280

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="../node_modules/vue/dist/vue.j

Vue实现搜索页面

STRainie的博客

07-22

3190

实现功能如下图所示：（因为被腰斩，样式未调整）直接上代码： pages/Search.vue //搜索页 <template> <div class="search-page"> <page-header></page-header> <keep-alive> //keep-alive包裹需更新组件 <search-content></se

vue-music:音乐网站应用:clapping_hands:https

04-25

使用vue3.0写的一个音乐webapp(...) 写的挺乱bug也很多,慢慢优化！好多相同的页面... ！！大佬们轻点喷...谢谢！！！一直想做个东西不知道做什么好,某天逛掘金的时候发现了新大陆专区看到了一些好看的设计图有点...

VUE3-MUSIC音乐播放器

05-05

3. **Teleport**：Vue3的Teleport功能用于将元素渲染到页面上的特定位置，这对于音乐播放器中的控制栏或悬浮窗口的实现非常有用。 4. **Suspense组件**：用于处理异步组件的加载，确保用户界面在等待资源加载时仍能...

一个webapp基于Vue20包含搜索和播放音乐

08-09

【标题】：“一个webapp基于Vue2.0包含...以上这些知识点涵盖了基于Vue.js 2.0开发一个音乐搜索和播放webapp的主要技术点，开发者在实践中不断学习和熟练掌握这些技能，可以打造出功能丰富、用户体验优秀的前端应用。

基于vue-element组件实现音乐播放器，vue 2.x开发的音乐APP

01-03

在这个音乐播放器项目中，Vue的组件化特性将帮助我们把应用拆分为独立可复用的部分，如播放列表、播放控制、搜索功能等。 Element UI是这个项目的关键组件。它提供了一系列预先设计和封装好的UI组件，如按钮、表格...

vue搜索页面.zip

04-14

页面框架采用vant的vue搜索功能页面

用vuejs仿网易云音乐（实现听歌以及搜索功能）

08-30

用vuejs仿网易云音乐（实现听歌以及搜索功能）

vue 实现搜索的结果页面支持全选与取消全选功能

11-29

演示地址，打开、搜索、随便点 http://msisliao.github.io/dem… npm i element-ui -S // main.js import ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' Vue.use(ElementUI) demo功能概览默认没有全选，搜索时支持全选与取消全选，将选择的数据添加到已选中，已选删除时改变当前搜索列表的状态与全选按钮的状态全选时全部追加到已选，取消全选时从已选中删除当前搜索的列表功能列表 1、搜索时展示相应的数据

Vue音乐--搜索页面08_点击歌曲

kingAn123的博客

10-11

767

大概步骤：目标效果七、点击歌曲li 要点：与排行榜歌曲列表的歌曲li点击对比是把获取到的所有歌曲列表设置为vuex中的播放列表而搜索结果的歌曲li是把一首歌添加进播放列表，而且不是简单push，而是插入正在播放因此要和排行榜歌曲li一样要操作的mutations是多个，利用到actions，来操作多个mutations （一）、点击触发actions事件 ↓sea...

vue音乐APP 8：搜索页面开发

aptx4869200312的博客

01-08

448

前言：以下内容均为学习慕课网高级实战课程的实践爬坑笔记。项目github地址：https://github.com/66Web/ljq_vue_music，欢迎Star。搜索歌手歌曲搜索历史保存一、搜索页面布局 search-Box组件开发 export default { props: { placeholder: { type: String, default:...

vue电商项目(三)——开发search页面

a_bowl_rice的博客

12-23

1021

search组件部分

vue项目：搜索--路由跳转新窗口页面，在新窗口还有搜索的操作