【经验分享】小程序关闭音频继续播放,滚动字幕,scroll-view精准高度
发布于 5 年前 作者 lijing 2480 次浏览 来自 问答

一、小程序关闭音频继续播放

在 Page 的 onHide 方法里,检测当前页面是否正在播放音频。如果正在播放则创建

       wx.getBackgroundAudioManager() 来实现继续播放,并用其 startTime 属性 使用继教播放开始于当前播放时间。

二、滚动字幕

利用 scroll-view 组件,将其 scroll-into-view 属性设置为一个变量,此变量为当前字幕行的 id 值。

<scroll-view class=“cc-scroll-view” style=“top:{{ccScrollViewTop}}px” scroll-into-view=“cc-row{{ccCursor<1?0:(ccCursor-1)}}” scroll-y=“true”>

</scroll-view>

三、scroll-view 精准高度

首先在wxss 定义如下。bottom:130rpx 是因为底部 130 是固定的。top:0 这个是要后面去计算,并将计算结果赋到 ccScrollViewTop 页面变量。

.cc-scroll-view{

  position:absolute;

  bottom:130rpx;

  left:0;

  right:0;

  top:0rpx;

}

我的应用正好需要用户点击一个导航标签才会显示 scroll-view ,因此,我捕获用户点击时,得到的事件元素的 offsetTop 值,即可准确获得 scroll-view 最佳 top 值。下页代码中的 750 是微信规定所有屏幕都是 750rpx 宽度,96 是我的应用里 导航标签的高度。scroll-view 将正好放在 导航标签 的下面。因此,scroll-view 的最佳 top 值为 导航标签 的offsetTop 与 导航标签 的实际高度之和。

计算top值时,我们使用的是px 单位,所以通过获取系统分辨率来将rpx转化成 px。

      if (page.data.ccScrollViewTop==0){

        wx.getSystemInfo({

          success: function (res) {

            page.setData({

              ccScrollViewTop: ((res.windowWidth / 750) * 96) + evt.currentTarget.offsetTop

            })

          }

        })

      }

回到顶部