vue实战 ---- 一个简单的音乐搜索网站(三)

vue实战 ---- 一个简单的音乐搜索网站(start)
vue实战 ---- 一个简单的音乐搜索网站(一)
vue实战 ---- 一个简单的音乐搜索网站(二)

1. songHeader.vue代码

挂件,没什么意义,







2. searchContent.vue代码

主要的代码,有点长








3. 代码详解

(1)加载歌曲数据

  • props: ['slist']
    这里peops定义了类属性可以从父亲组件接收歌曲数据然后用v-for循环导入
  • class="[index%2 == 0 ? 'even' : '']"
    css中我写了一个even的样式,就是偶数行颜色和奇数行颜色不同,让界面好看一些

(2)分页功能

这里耗费了我半天时间才解决,思路看起来也不难,歌曲总数songNum,定义一页展示
pageSize: 10条数据,那么总页数就是totalPage = songNum / pageSize

  • getShowPageList方法
    获取当前应展示的数据,原理也不难,使用slice函数对数组切片就行
  • prevPage方法
    点击的时候展示上一页数据
  • nextPage方法
    点击的时候展示下一页数据
  • changeList方法
    页码转换成数组,使得可以v-for导入

分页的思路看似不难,但还是花费了我蛮久时间才弄好,因为在加载数据时就要分页,那么想当然就是在created或mounted方法中调用上面分页的函数(涉及dom操作最好放到mounted方法中),一开始点击搜索的时候确实实现了分页,但是再点击一次就不会执行了,并且数据也没有刷新。数据是从父亲组件传来的,点击搜索事件也不是在本组件进行的,所以当歌曲数据改变的时候,当前组件并不知情,为了解决这个问题,就要用到watch方法监控数据的变动,用两个‘hidden’属性的input标签v-model绑定歌曲列表数据slist,当这个数据变动时,所有分页相关的方法也执行一次,子组件的数据也就随父亲组件的数据刷新了。

(3)播放

直接引用了html5原生的audio标签,设置了controls属性显示播放控件,设置了autoplay属性使得就绪状态就可以播放,实现方法就是直接绑定src属性,点击播放按钮时设置歌曲链接。

你可能感兴趣的:(vue实战 ---- 一个简单的音乐搜索网站(三))