uniapp做直播+可拖动弹幕

项目需求：用uniapp开发微信小程序，直播界面做可拖动弹幕。

一、直播页面，微信小程序的<live-player>组件就是用来搭建直播的。
我的项目需求是从上一个页面点击后直接跳转进对应的直播间，所以这个界面一开始就需要是全屏播放的。
1.<live-player>的全屏.

<live-player
	id="liveplayer"
	src="https://domain/pull_stream"
	mode="live"
	:autoplay="true"
	orientation="vertical"
	object-fit="fillCrop"
	@statechange="statechange"
	@error="error"
>
</live-player>

其中一个必不可少的属性就是id，这个id之后会用来在JS代码中获取live-player的上下文。

// 创建直播流对象，获取live-player的上下文。
let player = uni.createLivePlayerContext('liveplayer', this);

拿到这个上下文之后就可以通过调用方法实现全屏和退出全屏

// 直播流对象全屏
player.requestFullScreen();
//退出全屏
player.exitFullScreen();

2.直播弹幕区
有了全屏的直播后，需要在这个直播上放一个弹幕区域和按钮等。由于  map、video、canvas、camera、live-player、live-pusher都是原生组件，层级比前端组件高，即便使用了z-index前端组件也是无法覆盖到原生组件上的。所以采用官方提供的`<cover-view>`进行覆盖，这里注意，`<cover-view/> 内只能嵌套 <cover-view/> <cover-image/> <button/> <navigator/> <ad/>，其他标签的子节点树在真机上都会被忽略。`

有了这些限制，无法用<scroll-view>做一个可上下拖动的弹幕。所以采用以下的方法。

官方文档中，给cover-view提供了一个css的属性overflow-y: scroll;（官网上写的是overflow: scroll;试过了没有用），配合:scroll-top=“scrollTop+‘px’” 或 :scroll-top=" '"这两段代码让设定了高度的区域在内容溢出后实现可拖动，我这里使用了前者，因为后面在发送弹幕后还要实现自动定位到最后一行。

<!-- 弹幕 -->
<cover-view class="barrage" id="message-items" :scroll-top="scrollTop+'px'">
	<cover-view class="barrageItem" v-for="(item,index) in msgList" :key="index">
		<cover-view class="barrageIcon" :class="item.barrageIcon == '铁粉'? 'ironBarrageIcon' : 'newBarrageIcon'">{
  
  {item.barrageIcon}}</cover-view>
		<cover-view class="barrageName">{
  
  {item.barrageName}}：</cover-view>