uniapp实现视频上下滑动功能(小程序)以及video组件的暂停和播放

uni推荐使用swiper组件实现,在video组件的下面介绍有写。
这里实现方式是:
父组件先用swiper组件实现纵向滑动,然后在每个swiper-item中插入视屏组件video-item-vx(自己定义的组件),在video-item-vx组件中实现视屏播放,具体别的细节根据需要自己实现。
注意:不能无限添加swiper-item,16个以上会容易出现视频异常的报错,可以10个swiper-item循环,替换数据即可。

第一步:维护10个swiper-item,10个以上替换数据即可。
第二步:判断上滑还是下滑up down,用来判断videoIndex加减。
第三步:维护一个下标 videoIndex , 作用就是取二维数组的数据进行渲染。
第四步:维护一个二维数组作为数据源 [ [10条数据], [...] , ...]。 初始的数据源可以请求两次,避免了好多麻烦。
第五步:判断是否要首尾衔接

一、视屏屏纵向上下滑动

1、父组件html


<swiper
  class="swiper"
  :indicator-dots="indicatorDots"
  :autoplay="autoplay"
  :duration="duration"
  :vertical="vertical"
  :circular="circular"
  :current="current_"
  @animationfinish="videoAnimationfinish"
  @change="change"
  @transition="transition"
  style="height:100%"
>
  <template v-if="videoListAll[parseInt(videoIndex / 10)]">
    <swiper-item v-for="(item, index) in videoListAll[parseInt(videoIndex / 10)]" :key="item.videoId" 		  
	  @catchtouchmove="catchTouchMove" v-show="total -1 >= videoIndex >= 0">
      <video-item-vx
        :videoDetail="item"
        :current="current_"
        :videoIndex="index"
      >video-item-vx>
    swiper-item>
  template>
swiper>

备注:data中的数据
indicatorDots: false, // 是否显示面板指示点
autoplay: false, // 是否自动切换
vertical: true, // 滑动方向是否为纵向
duration: 800,
circular: false, // 是否衔接滑动
current_: 0, // 当前所在视频的 index
videoIndex: 0, // 维护的视屏下标
videoListAll:[], // 数据源
total: 0, // 视频总条数
isTwo: false, // 初始的时候是否请求了两次
isSuccess: true, // 请求是否失败
touchDirection: ‘’, // 滑动方向
current0: ‘’, // 上一个swiper下标
isRequest: false, // 是否在请求数据

2、父组件的js

@transition事件swiper-item 的位置发生改变时会触发,用来判断上滑还是下滑

transition (event) {
	// 在export default外定义一个数组 touchArr
	// 
                    
                    

你可能感兴趣的:(javascript,html5,html)