一、水平滑动,记录当前状态
当水平内容在一屏展示不全的时候,需要使用属性,white-space:no-wrap,来强制内容在同一行,同时使用overflow-x:scroll来让元素在水平方向可以滑动。
在这种情况下,早筛选列表中,想要记录当前筛选项的位置:
先看布局
![img_9cba7323dd6b653f7cf1e9231d39266f.png](https://i-blog.csdnimg.cn/blog_migrate/43f368b87d9b6a2b983d0a9f139205b8.png)
js实现
1.获取到当前点击的是第一个元素
var aa=this.gradeId-1;
var ll=0;
setTimeout(()=>{
2.获取到点击的元素的宽度
ll=document.getElementById('sort-name-spacial').getElementsByClassName('sort-name-item')[0].offsetWidth;
console.log(ll);
3.设置父盒子的scrollLeft值定于每一个子元素的宽度*元素的下标值
document.getElementById('sort-name-spacial').scrollLeft=ll*aa;
},100);
二、视屏播放
(1)利用浏览器原生播放器,实现视频方法功能
直接利用a标签就能实现
![img_f369499f53fe72b235fb734ba0391f58.png](https://i-blog.csdnimg.cn/blog_migrate/a873fb2ce9ac11f2cd5b3bea07a5e739.png)
(2)vue插件vue-video-player
官方github: https://github.com/surmon-china/vue-video-player
安装依赖 npm install vue-video-player -S
引入配置
![img_2544f0644a9bf9d5cd4da4a66ba9b6f9.png](https://i-blog.csdnimg.cn/blog_migrate/c05c097815dc80f94b01d86abbd46b30.png)
实现代码
![img_1eef7404113a0f478c7aedbdb9ad8a1d.png](https://i-blog.csdnimg.cn/blog_migrate/0f3721f30f4d4039227d642be1f06e47.png)
css部分 设置播放按钮的形状与位置
.video-js.vjs-big-play-button{}
三、音频播放
(1)基于museUI的音频播放
安装muse-ui
npm i muse-ui -S
在main.js中引入
import MuseUI from "muse-ui"
import 'muse-ui/dist/muse-ui.css'
Vue.use(MuseUI)
接下来是在组件中的实现
模板布局部分
![img_db9cfa651fa267195b32009151224a2b.png](https://i-blog.csdnimg.cn/blog_migrate/58369b91b79eb7383e8897200a1f131c.png)
js部分
![img_8f8068465ccf1da04e732606f88e45a9.png](https://i-blog.csdnimg.cn/blog_migrate/9b71d6ddae49716c3ce652cd5e383d31.png)
![img_c5fd8259a7c8926905b46b169ddcfbf5.png](https://i-blog.csdnimg.cn/blog_migrate/9b9cb7995f7dc6195ae6fce261e18561.png)
![img_4cdd540fb52ed5d5e534544727fa66f6.png](https://i-blog.csdnimg.cn/blog_migrate/442b29247c14723d69989b05ac42abca.png)
![img_2c38a98c837a40c3a4e38da3b3d7390c.png](https://i-blog.csdnimg.cn/blog_migrate/07e8a20df9bd252d27d9a3ce82e8a5cb.png)
最终的效果
![img_c2b7439368e42f8fc902ea9116451162.png](https://i-blog.csdnimg.cn/blog_migrate/8c8d4ceba358513261f8eb0a792546a9.png)
css部分不做展示了,可以在git上观看
(2)vue-player实现的音频播放
这个组件是aplayer基于vue的实现,并不断的更新完善,而不仅仅只是一层封装
安装:$ npm install vue-aplayer --save
使用:
在需要的文件引入该插件
import Aplayer from 'vue-aplayer'
组件代码
![img_09a4345c246f2837a65c33765ac1cf47.png](https://i-blog.csdnimg.cn/blog_migrate/d88c60c612864d259fd542bd9961f2cd.png)
属性:
这些属性大部分跟Aplayer的选项一样
![img_0d965a327d4c2ed05c21c2881ecd250e.png](https://i-blog.csdnimg.cn/blog_migrate/3621e26fcabbc16ccebbe05168f2fae9.png)
歌曲信息
属性music既可以是包含歌曲信息的对象类型,也可以是包含这些对象的数组类型
![img_19e0433dd243de2995f78bee4988882c.png](https://i-blog.csdnimg.cn/blog_migrate/34cc08947b19e40ad68f5b53bfac2a27.png)
事件
![img_4950aa53d7338368a0aa705248d0a107.png](https://i-blog.csdnimg.cn/blog_migrate/0123b573b1390417bbab2ee22bc28645.png)