swiper-vertical-video.uvue 6.1 KB
Newer Older
DCloud_JSON's avatar
DCloud_JSON 已提交
1 2 3 4 5 6
<template>
  <view class="page">
    <view style="padding: 10px;">
      <text>复用组件,无限滚动、加载、浏览视频的短视频模板</text>
      
      <text>【已知问题】swiper 组件竖滑动有 bug,先横向滑动</text>
7

DCloud_JSON's avatar
DCloud_JSON 已提交
8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28
      <view style="flex-direction: row;font-size: 10px;">
        <view>【状态】</view>
        <text v-for="(value,index) in state">
           第{{index+1}}个:{{value?'播放中':'已暂停'}}
        </text>
      </view>
    </view>
    <swiper class="swiper" :current="current" :circular="index != 0" :vertical="false" @change="onSwiperChange"
      @transition="onTransition">
      <swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
        <video :ref="'video-'+i" class="video" :id="item._id" :src="item.src" :poster="item.src+'?x-oss-process=video/snapshot,t_1000,f_jpg'"
           :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true"
          @play="onPlay(i)" @pause="onPause(i)"
        ></video>
        <view class="video-top-view" @click="changeState(i)">
          <image v-if="!state[i]" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
        </view>
        <view>
          <text>第:{{i}}个容器,内容:{{item.content}}</text>
        </view>
      </swiper-item>
29
    </swiper>
DCloud_JSON's avatar
DCloud_JSON 已提交
30 31
  </view>
</template>
32
<script>
DCloud_JSON's avatar
DCloud_JSON 已提交
33 34
  import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
  type ListItem = { _id : string, content : string, src : string }
35
  let page : number = 0;
DCloud_JSON's avatar
DCloud_JSON 已提交
36
  
37
  export default {
DCloud_JSON's avatar
DCloud_JSON 已提交
38 39 40 41 42
    components:{},
    computed:{
      currentVideo():VideoNode{
        console.log('"video-"+this.current',"video-"+this.current);
        return this.$refs["video-"+this.current] as VideoNode
43
      }
DCloud_JSON's avatar
DCloud_JSON 已提交
44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92
    },
    data() {
      return {
        list: [] as ListItem[],
        visibleList: [] as ListItem[],// 提高性能 可见的只有3个
        current: 0 as number,
        index: 0,
        state:[false,false,false] as boolean[]
      }
    },
    beforeCreate() {
      this.list = this.getData()
      this.visibleList = this.list.slice(0, 3)
    },
    watch: {
      current(current : number, oldCurrent : number) {
        let changeNumber = current - oldCurrent
        if (changeNumber == 1 || changeNumber == -2) {
          // console.error('向右');
          this.index++
        } else {
          // console.error('向左');
          this.index--
        }
        // //翻页(3项为一页)
        if (Math.abs(changeNumber) == 2) {
          // console.log('翻页');
          page = Math.floor(this.index / 3);
          // console.log(this.index);
          // console.log('page',page);
          // console.log('slice',3*page,3*page+3);
          if (this.list.length < 3 * page + 3) {
            let list : ListItem[] = this.getData()
            this.list.push(...list.toTypedArray())
          }

          let visibleList = this.list.slice(3 * page, 3 * page + 3)
          // 换数据
          this.visibleList = visibleList
        }
      },
      current(current){
        this.state.forEach((val:boolean,index:number)=>{
          if(index === current){
            this.doPlay(current)
          }else if(val){
           // 除了选中的其他已经播放的都需要停止
           this.doPause(index)
           console.log('index:'+index+'已被执行暂停');
93
          }
DCloud_JSON's avatar
DCloud_JSON 已提交
94 95 96 97 98 99
        })
      }
    },
    onReady() {
      // 一启动完成,就播放第一个
      this.doPlay(0)
100 101
    },
    methods: {
DCloud_JSON's avatar
DCloud_JSON 已提交
102 103 104 105 106
      changeState(index:number){
        if(this.state[index]){
          this.doPause(index)
        }else{
          this.doPlay(current)
107 108
        }
      },
DCloud_JSON's avatar
DCloud_JSON 已提交
109 110 111
      doPlay(index:number){
        (this.$refs["video-"+index] as VideoNode).play()
        console.log("doPlay  video-"+index);
112
      },
DCloud_JSON's avatar
DCloud_JSON 已提交
113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129
      doPause(index:number){
        (this.$refs["video-"+index] as VideoNode).pause()
        console.log("doPause  video-"+index);
      },
      onPause(index:number){
        this.state[index] = false
        console.log('onPause',index);
      },
      onPlay(index:number){
        this.state[index] = true
        console.log('onPlay',index);
      },
      getData() : ListItem[] {
        /* Promise 暂不支持
        Promise<void> 
        return new Promise((resolve) => {
          resolve();
DCloud_JSON's avatar
DCloud_JSON 已提交
130 131 132
        });*/
        
        let videoUrlList = [
DCloud_JSON's avatar
DCloud_JSON 已提交
133
          'https://web-assets.dcloud.net.cn/unidoc/zh/video/uts.mp4',
DCloud_JSON's avatar
DCloud_JSON 已提交
134
          'https://web-assets.dcloud.net.cn/unidoc/zh/video/uni-ai.mp4',
DCloud_JSON's avatar
DCloud_JSON 已提交
135
          'https://web-assets.dcloud.net.cn/unidoc/zh/video/uni-verify.mp4'
DCloud_JSON's avatar
DCloud_JSON 已提交
136 137
        ] as string[]
        
DCloud_JSON's avatar
DCloud_JSON 已提交
138 139 140 141 142
        let list = [] as ListItem[];
        for (let i = 0; i < 6; i++) {
          let index = this.list.length + i;
          let listItem : ListItem = {
            "_id": "a00" + index,
DCloud_JSON's avatar
DCloud_JSON 已提交
143 144
            "content": "这是第" + index + "条数据"+videoUrlList[i%3],
            "src": videoUrlList[i%3]
DCloud_JSON's avatar
DCloud_JSON 已提交
145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176
          }
          list.push(listItem)
        }
        return list
      },
      onSwiperChange(e : SwiperChangeEvent) {
        // console.error('SwiperChangeEvent',e.detail.current);
        this.current = e.detail.current;
      },
      onTransition(/*e : SwiperTransitionEvent*/) {
        // console.log('onTransition e.detail.dx', e.detail.dx);
      }
    }
  }
</script>

<style>
  .page {
    flex: 1;
    /* width: 750rpx; */
  }

  .swiper,
  .swiper-item,
  .video,
  .video-top-view ,
  .video-cover {
    height: 750rpx;
  }

  .swiper {
    flex: 1;
DCloud_JSON's avatar
DCloud_JSON 已提交
177
    /* border: 1px solid #000; */
DCloud_JSON's avatar
DCloud_JSON 已提交
178 179 180 181
  }

  .swiper-item {
    flex: 1;
DCloud_JSON's avatar
DCloud_JSON 已提交
182
    /* border: 1px solid red; */
DCloud_JSON's avatar
DCloud_JSON 已提交
183 184 185 186 187 188 189 190 191 192 193 194 195
    padding: 10px 5px;
    position: relative;
  }

  .video {}

  .video-top-view {
    position: absolute;
    top: 0;
    left: 0;
    justify-content: center;
    align-items: center;
    align-content: center;
DCloud_JSON's avatar
DCloud_JSON 已提交
196
    /* border: 1px solid red; */
DCloud_JSON's avatar
DCloud_JSON 已提交
197 198 199 200 201 202 203 204
    flex: 1;
    width: 750rpx;
  }

  .play-btn {
    width: 30px;
    height: 30px;
    color: #FFF;
205
  }
DCloud_JSON's avatar
DCloud_JSON 已提交
206 207 208 209 210 211
  .video-cover{
    position: absolute;
    width: 750rpx;
    top: 0;
    left: 0;
  }
212
</style>