vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网 |
您所在的位置：网站首页 › 音乐播放界面设计 › vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网 |
vue+element实现美观大方好看的音乐网站，仿照咪咕音乐网
|
目录 一、前言 二、首页实现及效果图 1.效果图 2.项目结构、设计说明 3.顶部菜单 4.首页轮播图 5.歌单推荐
三、歌单实现 1.效果图 2.轮播图动态切换效果 3.歌单详情 四、 专辑 1.专辑首页-效果图 2.专辑详情-效果图 五、榜单 1.榜单-效果图 2.歌曲详情 六、歌手列表 1. 列表效果图 2.歌手详情 七、登录页 1.效果图 2.源码实现 八、总结 一、前言项目在线预览：点击访问 咪咕音乐网，最近看到其官网，第一感觉真的很美观大方，有被它惊艳到。所以作者忍不住做了一版仿照咪咕音乐的demo。 与音乐相关的demo，之前也发过一篇关于QQ音乐的demo，可以访问： 《vue+element高度仿照QQ音乐，完美实现PC端QQ音乐》 二、首页实现及效果图 1.效果图
项目以vue项目创建，前端某些元素使用element，项目启动执行的命令为： npm installnpm run dev结构如下截图，项目已经集成和实现了需要请求后端接口的一切功能，所以无须花费精力去考虑前端如何去对接后端和接口，可以把一切精力放在实现前端界面设计上来。 这样不懂后端的伙伴也省心省力，接口请求只需按照模板去copy就好，无非就是get/post/delete/put等请求方式和参数传递的差别，当然不明白的可以细问作者。 项目结构还是分为：顶部+具体功能显示容器+底部，页面存放于src/page目录下，看目录命名就能明白其含义，具体功能页面在views目录下。 路由在router目录中，全局布局公用样式在styles，比如整个项目框架左右空间布局，最小宽度等。 路由权限也是很重要的一个功能，为permission.js，所有页面跳转都会经过其拦截，有人问，路由权限有什么用，好说，比如订单页面或个人中心页面吧，肯定是需要登录才能访问的，首页却是无需登录即可访问的，那么就可以在permission.js里面获取登录token，有token即表示已经登录，可以访问订单或个人中心页面，否则跳转登录页等。
顶部菜单分为两级菜单，交互为鼠标聚焦触发
源码实现： 
音乐
现场
会员中心
破壳平台
客户端下载
首页
歌单
专辑
榜单
歌手
彩铃
首页
演唱会
独家放送
MV
export default {
data() {
return {
subMenuIndex: 1,//子菜单显示
};
},
mounted() {
},
methods: {
onMouseOver(index){//鼠标聚焦显示二级菜单
this.subMenuIndex = index;
}
}
};
4.首页轮播图
轮播图使用element的走马灯效果，element好处就是简单方便使用。 Element - The world's most popular Vue UI framework
模仿官方样式，鼠标聚焦显示播放按钮，同时显示音波震动效果 源码实现 歌单推荐 更多
{{item.listenNum}} {{item.name}} 新碟上架 更多
2023-04-20
{{item.name}} 那英 / 马伊琍 / 许一鸣 / 田园 / 董冬冬 / 白宇 / A-Lin 数字专辑 更多{{item.name}} 朝简 / 窦唯 数据构造源码： export default { data() { return { banners:[//轮播图 require('../../../public/img/230517091951259_1400x350_5713.jpg'), require('../../../public/img/23051910364536_1400x350_3748.jpg'), require('../../../public/img/230519104200186_1400x350_6951.jpg'), require('../../../public/img/230519105837175_1400x350_329.jpg'), require('../../../public/img/230519105101366_1400x350_2796.jpg'), require('../../../public/img/230519132656314_1400x350_6114.jpg'), require('../../../public/img/23051613414308_1400x350_1883.jpg') ], recommends:[//推荐 {name:'〔骑行在路上〕无限循环，解压必备',img:require('../../../public/img/272769fe-fd84-437d-8e74-84a199a9d2a7.jpg'),listenNum:'198.2w'}, {name:'粤语回忆录|回忆杀里的经典记录',img:require('../../../public/img/5a5e7199-5ceb-4094-aa87-4f446670432a.jpg'),listenNum:'155.6w'}, {name:'学习纯音 | 凝神静气，思维跃升',img:require('../../../public/img/b72d056e-3fc7-4c18-b95b-2d3f215a1f25.jpg'),listenNum:'119.2w'}, {name:'宅家小调丨平凡小事促成美好日常',img:require('../../../public/img/482f5fb2-10ff-4f6f-b8a8-a18dad8a8fb7.jpg'),listenNum:'95.8w'}, {name:'散步减压丨远离繁华，走向空旷',img:require('../../../public/img/356363c5-26a1-4ea9-b83e-326e7cd000f1.jpg'),listenNum:'93.5w'}, {name:'驾车：希望不辜负理想也不辜负热爱',img:require('../../../public/img/b981f60f-3785-4dac-a7f3-f5cb7d5eaefc.jpg'),listenNum:'93.2w'}, {name:'〔骑行在路上〕无限循环，解压必备',img:require('../../../public/img/272769fe-fd84-437d-8e74-84a199a9d2a7.jpg'),listenNum:'198.2w'}, {name:'粤语回忆录|回忆杀里的经典记录',img:require('../../../public/img/5a5e7199-5ceb-4094-aa87-4f446670432a.jpg'),listenNum:'155.6w'}, {name:'学习纯音 | 凝神静气，思维跃升',img:require('../../../public/img/b72d056e-3fc7-4c18-b95b-2d3f215a1f25.jpg'),listenNum:'119.2w'}, {name:'宅家小调丨平凡小事促成美好日常',img:require('../../../public/img/482f5fb2-10ff-4f6f-b8a8-a18dad8a8fb7.jpg'),listenNum:'95.8w'}, {name:'散步减压丨远离繁华，走向空旷',img:require('../../../public/img/356363c5-26a1-4ea9-b83e-326e7cd000f1.jpg'),listenNum:'93.5w'}, {name:'驾车：希望不辜负理想也不辜负热爱',img:require('../../../public/img/b981f60f-3785-4dac-a7f3-f5cb7d5eaefc.jpg'),listenNum:'93.2w'} ], newDiskList:[//新碟上架 {name:'《龙城》影视原声带',img:require('../../../public/img/AS6b7741232ee61de18b9c31babc5795ff.jpg')}, {name:'瞧!你这小脾气 影视剧原声带',img:require('../../../public/img/AS7b869e0e8002e25bac9fa77ef5f5d3a8.jpg')}, {name:'泰版《放羊的星星》原声带',img:require('../../../public/img/ASa375961663661da5a832cc028de468a9.jpg')}, {name:'鲸鱼马戏团VOL.7 索拉里斯 —— 时间与永恒',img:require('../../../public/img/AS99df91468fcb4791943ef12808449191.jpg')}, {name:'《声生不息·宝岛季》第5期',img:require('../../../public/img/AS8e621cc6f42ee7f29d146771bd505032.jpg')}, {name:'《龙城》影视原声带',img:require('../../../public/img/AS6b7741232ee61de18b9c31babc5795ff.jpg')}, {name:'瞧!你这小脾气 影视剧原声带',img:require('../../../public/img/AS7b869e0e8002e25bac9fa77ef5f5d3a8.jpg')}, {name:'泰版《放羊的星星》原声带',img:require('../../../public/img/ASa375961663661da5a832cc028de468a9.jpg')}, {name:'鲸鱼马戏团VOL.7 索拉里斯 —— 时间与永恒',img:require('../../../public/img/AS99df91468fcb4791943ef12808449191.jpg')}, {name:'《声生不息·宝岛季》第5期',img:require('../../../public/img/AS8e621cc6f42ee7f29d146771bd505032.jpg')} ], digitalAlbumList:[//数字专辑 {name:'神女赋',img:require('../../../public/img/AM85cc6100766e75b3e8115973ad1316ca.jpg')}, {name:'琵琶行',img:require('../../../public/img/AM8f61951fa2888ed88f64c724d3057c23.jpg')}, {name:'宋词',img:require('../../../public/img/AMd388fa758ff8baaa5bc236aa96c69887.jpg')}, {name:'元曲',img:require('../../../public/img/AM5176573d3745c183aa1cbad23479ef8f.jpg')}, {name:'DREAMS',img:require('../../../public/img/AMeb1420713a4a582e7e681ffc75048038.jpg')}, ], rankingBanner:[//顶部小轮播图 require('../../../public/img/small-banner1.jpg'), require('../../../public/img/small-banner2.jpg'), require('../../../public/img/small-banner3.jpg') ] }; }, mounted() { }, methods: { } }; 三、歌单实现 1.效果图
轮播图左右动态切换，使用JavaScript事件setInterval方法每隔3毫秒，递增或递减left边距变化来实现 setInterval动态切换效果源码： export default { data() { return { bannerLeft: 0, moreLeft: 0,//左右移动轮播图-最大值 move: false, banners:[ {img:require('../../../public/img/4aa0fcf9-69f8-45b0-ba77-ce6ad96b25c2.jpg'),listenNum:'159.1w',name:'【煲耳机无损精选】你要的白噪音，粉红噪音都在这里'}, {img:require('../../../public/img/6d69b614-c898-41a1-80fc-3bb410900e6e.jpg'),listenNum:'247.1w',name:'90后回忆向丨学生时代听过的那些流行歌'}, {img:require('../../../public/img/d9033323-69e4-43aa-b2d1-d055716259ad.jpg'),listenNum:'66.8w',name:'经典|用电影配乐讲故事'}, {img:require('../../../public/img/b2081de7-720b-4ef0-8a03-3ee5cf6f5694.jpg'),listenNum:'91.9w',name:'轻摇旋律丨让疲惫无处可藏'}, {img:require('../../../public/img/84a7786f-649f-4e22-a3a1-ebc52e4c1bdc.jpg'),listenNum:'0.7w',name:'国际天后 · CoCo李玟'}, {img:require('../../../public/img/e84de956-bc96-4c49-8a7a-d658dcd57048.jpg'),listenNum:'78.7w',name:'开口就能让你爱上欧美流行歌曲'}, {img:require('../../../public/img/f240e2f2-1365-460c-a8c8-15bc566d55c3.jpg'),listenNum:'62.2w',name:'别把遗憾，推给来日方长'}, {img:require('../../../public/img/72f481e7-8a80-4368-8511-932c5f90d881.jpg'),listenNum:'57.4w',name:'古风| 朗朗盛世 共悦未来'} ], showMore: false, menuIndex: 1,//选中的菜单 data:[ {name:'华语R&B：悦耳律动，指尖随之跳动',img:require('../../../public/img/7af23a79-b662-46c6-bd0f-bb14048da085.jpg'),listenNum:'188.8w'}, {name:'国风| 青鸟踏沧浪，随诗抵达他乡',img:require('../../../public/img/67c2b1f1-9eaa-4da1-af83-4df6b3b07571.jpg'),listenNum:'180.0w'}, {name:'清新灵动的欧美吉他弹唱',img:require('../../../public/img/071a23a4-f37b-4ce3-84a7-8e2e5845e31d.jpg'),listenNum:'139.2w'}, {name:'静享惬意时光|陪你出游的清新小调',img:require('../../../public/img/43fb0c11-dfef-42fa-94c9-008d62c45592.jpg'),listenNum:'192.8w'}, {name:'特立独行|小众宝藏，等一双发现美的耳朵',img:require('../../../public/img/73eb4544-e9f6-4585-9cc5-fc7874393d07.jpg'),listenNum:'137.7w'}, {name:'怀旧丨童年是梦 梦向外婆的桥',img:require('../../../public/img/2dd9186a-9fa1-4868-a773-3a01b90a84a4.jpg'),listenNum:'43.3w'}, {name:'华语R&B：悦耳律动，指尖随之跳动',img:require('../../../public/img/7af23a79-b662-46c6-bd0f-bb14048da085.jpg'),listenNum:'188.8w'}, {name:'国风| 青鸟踏沧浪，随诗抵达他乡',img:require('../../../public/img/67c2b1f1-9eaa-4da1-af83-4df6b3b07571.jpg'),listenNum:'180.0w'}, {name:'清新灵动的欧美吉他弹唱',img:require('../../../public/img/071a23a4-f37b-4ce3-84a7-8e2e5845e31d.jpg'),listenNum:'139.2w'}, {name:'静享惬意时光|陪你出游的清新小调',img:require('../../../public/img/43fb0c11-dfef-42fa-94c9-008d62c45592.jpg'),listenNum:'192.8w'}, {name:'特立独行|小众宝藏，等一双发现美的耳朵',img:require('../../../public/img/73eb4544-e9f6-4585-9cc5-fc7874393d07.jpg'),listenNum:'137.7w'}, {name:'怀旧丨童年是梦 梦向外婆的桥',img:require('../../../public/img/2dd9186a-9fa1-4868-a773-3a01b90a84a4.jpg'),listenNum:'43.3w'}, {name:'华语R&B：悦耳律动，指尖随之跳动',img:require('../../../public/img/7af23a79-b662-46c6-bd0f-bb14048da085.jpg'),listenNum:'188.8w'}, {name:'国风| 青鸟踏沧浪，随诗抵达他乡',img:require('../../../public/img/67c2b1f1-9eaa-4da1-af83-4df6b3b07571.jpg'),listenNum:'180.0w'}, {name:'清新灵动的欧美吉他弹唱',img:require('../../../public/img/071a23a4-f37b-4ce3-84a7-8e2e5845e31d.jpg'),listenNum:'139.2w'}, {name:'静享惬意时光|陪你出游的清新小调',img:require('../../../public/img/43fb0c11-dfef-42fa-94c9-008d62c45592.jpg'),listenNum:'192.8w'}, {name:'特立独行|小众宝藏，等一双发现美的耳朵',img:require('../../../public/img/73eb4544-e9f6-4585-9cc5-fc7874393d07.jpg'),listenNum:'137.7w'}, {name:'怀旧丨童年是梦 梦向外婆的桥',img:require('../../../public/img/2dd9186a-9fa1-4868-a773-3a01b90a84a4.jpg'),listenNum:'43.3w'} ] }; }, mounted() { this.moreLeft = -((this.banners.length - 6) * 217); }, methods: { getMoreBanner(index){//左右移动轮播图-查看更多 if(this.move){ return; } if(index === 1){//左移 if(this.bannerLeft === 0){ return; } let end = this.bannerLeft + 217; let that = this; let inter = setInterval(function(){ that.move = true; that.bannerLeft++; if(that.bannerLeft >= end){ clearInterval(inter); that.move = false; } },3); }else if(index === 2){//右移 if(this.bannerLeft |
【本文地址】
今日新闻 |
推荐新闻 |