1-
数组和对象不能直接赋值情况和解决方法
vue不支持data的深度赋值
2层以上全不支持。
除非在data那里有声明
笔记一下,感谢答疑
https://www.jianshu.com/p/a3ffbe4d2b1a.
2-
通过props传递给子组件的show,不能在子组件内部修改props中的show值。
3- NavigationDuplicated: Avoided redundant navigation to current location:避免了对当前位置的冗余导航
4-vue data中设置图片url
src: require('@/assets/play/play.svg')
5- 事件中获取鼠标点击位置
- touch事件,来获取鼠标位置:@touchstart @touchmove @touchend
- // 获取x 坐标 e.targetTouches[0].clientX
- // 获取y 坐标 e.targetTouches[0].clientY
6-this.$nextTick
7- 音频
- audio.duration 总时间
- audio.currentTime 当前时间
- 当前进度条 = 当前时间 / 总时间 * 进度条总长度
8- 歌词同步
- 1- 获取每条歌词对应的时间(s)
- 2- 设置每条歌词id = “s” + 对应时间
- 3- 获取当前音频播放时间currentTime (s秒)
- 4- 当 id = “s” + 对应时间 中的对应时间 = currentTime 时,歌词颜色变化
9- 滚动到指定位置
- 滚动的容器 overflow:scroll;
- 滚动的容器 ref = “scroll”
- this.$refs.scroll.scrollTop = 200 (向上滚动距离)
10- 音频初次加载 NaN
- 原因: 音频是异步加载,未加载完显示NaN。update中也可获取音频时间
getDuration() {
let audio = document.getElementsByTagName("audio")[0];
let video = document.getElementsByTagName("video")[0];
if (audio.duration) { //判断音频是否加载好
this.time = audio.duration;
return;
} else {
let _this = this;
setTimeout(() => {
_this.getDuration(); //再次获取
}, 1000);
}
},
11-判断移动 pc 端
链接: https://www.jianshu.com/p/182fe3b69071.