admin 管理员组

文章数量: 886993

vue学习总结(三,案例用vue开发网易云音乐(已实现在线播放和下载))

效果如图:

完整代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style lang="">html,body {height: 100%;padding: 0;margin: 0;}#app {height: 100%;display: flex;}#app>#left {flex: 1;background-color: skyblue;text-align: center;/* 超出滚动 */overflow: scroll;}#app>#right {flex: 1;background-color: orange;}ul {list-style: none;padding: 0;}input {width: 469px;height: 56px;margin: 10px auto;border-radius: 10px;outline: none;font-size: 24px;border: 0;padding-left: 15px;}#left li {width: 451px;/* height: 35px; */margin: 0 auto;font-weight: 700;border: 2px solid black;line-height: 35px;color: white;background-color: cadetblue;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;max-height: 35px;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}#left li:hover {cursor: pointer;background-color: greenyellow;color: red;}#right {position: relative;overflow: scroll;}audio {/* position: absolute;left: 50%;transform: translateX(-50%) translateY(46px); */display: block;margin: 0 auto;}/* li标签过渡的样式 */.list-item {display: inline-block;margin-right: 10px;}.list-enter-active,.list-leave-active {transition: all 1s;}.list-enter,.list-leave-to{opacity: 0;transform: translateX(100px);}/* 设置专辑图片样式 */.cover{width: 260px;height: 260px;border-radius: 50%;display: block;margin: 10px auto;/* transform: translateX(-50%) translateY(10px); */}/* 动画 */@keyframes autoRotate{to{transform: rotateZ(360deg);}}/* 动画播放样式 */.autoRotate{/* 动画名,一直播放iteration(一直重复),匀速(timing)，时间2s(duration),状态(running) */animation-name:autoRotate;animation-iteration-count:infinite;animation-timing-function: linear;animation-duration:2s;animation-play-state:running;}/* 动画状态 */.pause{animation-play-state:paused;}/* 评论 */ment{height: 150px;/* background-color: skyblue; */}ment li{display: flex;padding: 5px;}ment li .left{width: 120px;height: 120px;}ment li .left img{width: 100px;}ment li a{text-decoration: none;font-weight: bold;color: crimson;}</style>
</head><body><div id="app"><!-- 左边 --><div id="left"><input type="text" value="请输入你要搜索的歌名" v-model="inputValue" @keyup.enter="search"><!-- 给li添加过渡 ;v-on:after-enter="afterEnter":钩子函数--><transition-group name="list" tag="ul" v-on:after-enter="afterEnter"><!-- play(item.id):把id传过去 --><li v-for="(item, index) in musicList" :key="item.id" @dblclick="playMusic(item.id,item.album.id)" :style="{'transition-delay':index*100+'ms'}" >{{item.name}}-----演唱者:{{item.artists[0].name}}</li></transition-group></div><!-- 右边,播放 --><div id="right"><!-- 专辑页面 --><img :src="picUrl" alt="" class="cover autoRotate" :class="{pause:isPause}"><!-- autoplay:自动播放,controls显示控件 ;@play="play"是自定义方法--><audio :src="songUrl" autoplay controls @play="play" @pause="pause" ></audio><h3>精彩评论</h3><div class="comment"><ul><!-- 遍历数组时,需要动画时才用到key --><li v-for="(item, index) in comments" ><div class="left"><img :src="item.user.avatarUrl" alt=""></div><div class="right"><a href="#">{{item.user.nickname}}</a> <p>{{item.content}}</p></div></li></ul></div></div></div>rightv></body>
<!-- 导入vue -->
<script src=".js"></script>
<!-- 导入vue插件 -->
<script src="@1.5.1"></script>
<script>//代码/*音乐播放器需求1:搜索歌曲发送网络请求回调函数函数中渲染数据有动画需求2:双击播放歌曲根据id调用接口查询数据通过audio播放歌曲获取专辑的信息 进而获取封面 展示给用户需求3播放歌曲时 封面转动暂停播放时封面停止转动步骤:1.先写动画样式,动画命名为autoRotate,因为是一直运动,所以使用animation;2.同时写一个暂停的样式,命名为pause,给data添加一个isPause来存值,默认给一个false3.添加运动和暂停的步骤是添加上面的两个类,但是pause要使用v-bind指令来设置属性;4.在audio音频里添加播放和暂停的点击方法,在对应的方法里设置对应的布尔值;需求4点击播放歌曲同时获取这首歌的评论步骤:1.在数据中声明一个comments的空数组,用来存评论内容2.在播放方法中写获取评论的接口3.在响应体里将内容赋值给声明的数组*/let app = new Vue({el: "#app",data: {inputValue: '',//输入的值musicList: [], //存储歌列表songUrl: '',//播放歌曲的urlpicUrl:'',//获取专辑信息isPause:false,//专辑是否暂停comments:[]//评论内容},methods: {// li标签过渡的事件randomIndex: function () {return Math.floor(Math.random() * this.items.length)},add: function () {this.items.splice(this.randomIndex(), 0, this.nextNum++)},remove: function () {this.items.splice(this.randomIndex(), 1)},//搜索歌曲事件search() {//调用接口this.$http.get(`=${this.inputValue}`).then(response => {// console.log(response);//将结果添加到musicList中this.musicList = response.body.result.songs;}, response => {// error callbackalert("出错了")});},// 双击播放歌曲事件,接收传过来的idplayMusic(id,albumId) {//获取歌曲的urlthis.$http.get(`=${id}`).then(response => {// console.log(response);//将结果添加到musicList中this.songUrl = response.body.data[0].url;}, response => {// error callbackalert("出错了")});// 获取专辑信息this.$http.get(`=${albumId}`).then(res=>{this.picUrl=res.body.album.blurPicUrl;}),err=>{}//获取评论内容接口this.$http.get(`=${id}&limit=1`).then(res=>{console.log(res);thisments=res.body.hotComments;}),err=>{alert('信息错误')}},//钩子函数:动画执行完后去除了style属性,不去掉会卡顿afterEnter(el){el.style='';},// 专辑图片旋转事件play(){console.log('播放');this.isPause=false;},pause(){console.log('暂停');this.isPause=true;}},})
</script></html>

如果接口不能使用:请登录,重新下载开启服务器即可(不会可以@我).

本文标签： vue学习总结(三 案例用vue开发网易云音乐(已实现在线播放和下载))

版权声明：本文标题：vue学习总结(三,案例用vue开发网易云音乐(已实现在线播放和下载)) 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.freenas.com.cn/jishu/1732351795h1533286.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。