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属性，点击播放按钮时设置歌曲链接。