当前位置:   article > 正文

uniapp 通过scroll-view实现音频的文字内容超出显示区,滚动条自动根据音频时间百分比滑动。_uniapp 超出文字轮播

uniapp 超出文字轮播
  1. data() {
  2. return {
  3. innerAudioContext: null, //音频实例对象
  4. windowHeight: 0, //可用窗口高
  5. scrollTop: 1, //滚动 初始值
  6. scrollHeight: 0, //滚动内容总高度
  7. reHeight: 0, //可滚动高度
  8. isGetReHeight: false, // 是否已经计算出可用高度
  9. percentPlayed: 0, //当前时间/总时间;得到的百分比
  10. };
  11. },
  12. methods: {
  13. getwindowHeight() {
  14. let obj = uni.getWindowInfo();
  15. this.windowHeight = obj.windowHeight;
  16. console.log("this.windowHeight=>", this.windowHeight);
  17. },
  18. scroll(event) {
  19. console.log("监视滚动", event);
  20. this.scrollHeight = event.detail.scrollHeight;
  21. this.reHeight =
  22. this.scrollHeight - parseInt(0.5 * Number(this.windowHeight));
  23. console.log("可滚动高度=>", this.reHeight);
  24. this.isGetReHeight = true;
  25. },
  26. innerAudioContextAction() {
  27. // 设置音频实例与相关设置
  28. this.innerAudioContext = uni.createInnerAudioContext();
  29. console.log("innerAudioContext=>", this.innerAudioContext);
  30. console.log("??????", this.voiceArr[this.curIndex]);
  31. this.innerAudioContext.autoplay = true; //设置是否自动播放
  32. this.innerAudioContext.src = this.voiceArr[this.curIndex];
  33. this.pageTitle = this.titleArr[this.curIndex].title;
  34. console.log("src", this.innerAudioContext.src);
  35. this.innerAudioContext.play(); //播放
  36. this.innerAudioContext.onCanplay((re) => {
  37. console.log("onCanplay", re);
  38. });
  39. this.innerAudioContext.onTimeUpdate(() => {
  40. let currentTime = this.innerAudioContext.currentTime;
  41. let innerAudioContext = this.innerAudioContext.duration;
  42. console.log("音频播放进度更新事件", currentTime, innerAudioContext);
  43. this.percentPlayed =
  44. Number(this.innerAudioContext.currentTime) /
  45. Number(this.innerAudioContext.duration);
  46. console.log("结果=>", this.percentPlayed.toFixed(4));
  47. this.scrollTop = Number(this.reHeight * this.percentPlayed);
  48. console.log(
  49. "this.scrollTop=>",
  50. this.scrollTop,
  51. "this.reHeight=>",
  52. this.reHeight
  53. );
  54. });
  55. this.innerAudioContext.onError(function (res) {
  56. console.log(res);
  57. });
  58. this.innerAudioContext.onEnded(() => {
  59. this.innerAudioContext.stop();
  60. if (this.curIndex == this.voiceArr.length - 1) {
  61. console.log("放完了");
  62. console.log("this.curIndex=>", this.curIndex);
  63. this.innerAudioContext.stop();
  64. }
  65. if (this.curIndex != this.voiceArr.length - 1) {
  66. console.log("改前this.curIndex=>", this.curIndex);
  67. this.curIndex++;
  68. console.log("改后this.curIndex=>", this.curIndex);
  69. this.pageTitle = this.titleArr[this.curIndex].title;
  70. this.innerAudioContext.src = this.voiceArr[this.curIndex];
  71. console.log("再次修改后src", this.innerAudioContext.src);
  72. this.innerAudioContext.autoplay = true; //设置是否自动播放
  73. this.innerAudioContext.play();
  74. }
  75. });
  76. },

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/笔触狂放9/article/detail/652048
推荐阅读
相关标签
  

闽ICP备14008679号