From 6a2f77d545218e856ffdfa6a60d6cb217073b42c Mon Sep 17 00:00:00 2001
From: linju <linju@dcloud.io>
Date: Mon, 31 Jul 2023 11:31:41 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=20=E7=9F=AD=E8=A7=86?=
 =?UTF-8?q?=E9=A2=91=E6=A8=A1=E6=9D=BF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                    |   3 +-
 .../swiper-vertical-video.uvue                | 292 ++++++++++++------
 .../template/swiper-vertical-video/play.png   | Bin 0 -> 3485 bytes
 3 files changed, 193 insertions(+), 102 deletions(-)
 create mode 100644 static/template/swiper-vertical-video/play.png

diff --git a/pages.json b/pages.json
index 9d57ac5d..19a9818c 100644
--- a/pages.json
+++ b/pages.json
@@ -657,7 +657,8 @@
     {
       "path": "pages/template/scroll-fold-nav/scroll-fold-nav",
       "style": {
-        "navigationStyle": "custom"
+        "navigationStyle": "custom",
+        "navigationBarTextStyle":"black"
       }
     },
     {
diff --git a/pages/template/swiper-vertical-video/swiper-vertical-video.uvue b/pages/template/swiper-vertical-video/swiper-vertical-video.uvue
index af096304..7879b162 100644
--- a/pages/template/swiper-vertical-video/swiper-vertical-video.uvue
+++ b/pages/template/swiper-vertical-video/swiper-vertical-video.uvue
@@ -1,115 +1,205 @@
-<template>
-  <view class="page">
-    <view style="padding: 20px;">
-      <text>仿抖音，复用组件，无限滚动、加载、浏览视频的示例模板</text>
-      <text>已知问题：</text>
-      <text>1.swiper 组件竖滑动有 bug，先横向滑动</text>
-      <text>2.uvue暂未支持video</text>
-    </view>
+<template>
+  <view class="page">
+    <view style="padding: 10px;">
+      <text>复用组件，无限滚动、加载、浏览视频的短视频模板</text>
+      
+      <text>【已知问题】swiper 组件竖滑动有 bug，先横向滑动</text>
 
-    <swiper class="swiper" :current="current" :circular="index != 0" :vertical="false" @change="onSwiperChange" @transition="onTransition">
-      <swiper-item class="swiper-item" v-for="(item,index) in visibleList" :key="index">
-        <!-- <video ref="video" class="video" :id="item.id" :ref="item.id" :src="item.src" :controls="false" :loop="true"
-                    :show-center-play-btn="false"></video> -->
-        第：{{index}}个容器
-        数据内容：{{item.content}}
-      </swiper-item>
+      <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>
     </swiper>
-  </view>
-</template>
+  </view>
+</template>
 <script>
-  type ListItem = { _id : string, content : string }
+  import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
+  type ListItem = { _id : string, content : string, src : string }
   let page : number = 0;
+  
   export default {
-    data() {
-      return {
-        list: [] as ListItem[],
-        visibleList: [] as ListItem[],// 提高性能 可见的只有3个
-        current: 0 as number,
-        index: 0
+    components:{},
+    computed:{
+      currentVideo():VideoNode{
+        console.log('"video-"+this.current',"video-"+this.current);
+        return this.$refs["video-"+this.current] as VideoNode
       }
-    },
-    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())
+    },
+    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+'已被执行暂停');
           }
-          
-          let visibleList = this.list.slice(3 * page, 3 * page + 3)
-          // 换数据
-          this.visibleList = visibleList
-          /*
-          // 不换数据，只换内容
-          for (let i = 0; i < 3; i++) {
-            this.visibleList[i].src = visibleList[i].src
-            this.visibleList[i].other = visibleList[i].other
-          }*/
-        }
-      }
+        })
+      }
+    },
+    onReady() {
+      // 一启动完成，就播放第一个
+      this.doPlay(0)
     },
     methods: {
-      getData() : ListItem[] {
-        /* Promise 暂不支持
-        Promise<void> 
-        return new Promise((resolve) => {
-          resolve();
-        });*/
-        let list = [] as ListItem[];
-        for (let i = 0; i < 6; i++) {
-          let index = this.list.length + i;
-          let listItem : ListItem = {
-            "_id": "a00" + index,
-            "content": "这是第" + index + "条数据"
-          }
-          list.push(listItem)
+      changeState(index:number){
+        if(this.state[index]){
+          this.doPause(index)
+        }else{
+          this.doPlay(current)
         }
-        return list
       },
-      onSwiperChange(e : SwiperChangeEvent) {
-        // console.error('SwiperChangeEvent',e.detail.current);
-        this.current = e.detail.current
+      doPlay(index:number){
+        (this.$refs["video-"+index] as VideoNode).play()
+        console.log("doPlay  video-"+index);
       },
-      onTransition(e:SwiperTransitionEvent){
-        console.log('onTransition e.detail.dx',e.detail.dx);
-      }
-    }
-  }
-</script>
-
-<style>
-  .page {
-    flex: 1;
-    /* width: 750rpx; */
-  }
-
-  .swiper {
-    flex: 1;
-    border: 1px solid #000;
-  }
-
-  .swiper-item {
-    flex: 1;
-    border: 1px solid red;
-    padding: 10px 5px;
+      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();
+        });*/
+        let list = [] as ListItem[];
+        for (let i = 0; i < 6; i++) {
+          let index = this.list.length + i;
+          let listItem : ListItem = {
+            "_id": "a00" + index,
+            "content": "这是第" + index + "条数据",
+            "src": "https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/hellouniapp/hello-nvue-swiper-vertical-0"+(i%3+1)+".mp4"
+          }
+          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;
+    border: 1px solid #000;
+  }
+
+  .swiper-item {
+    flex: 1;
+    border: 1px solid red;
+    padding: 10px 5px;
+    position: relative;
+  }
+
+  .video {}
+
+  .video-top-view {
+    position: absolute;
+    top: 0;
+    left: 0;
+    justify-content: center;
+    align-items: center;
+    align-content: center;
+    border: 1px solid red;
+    flex: 1;
+    width: 750rpx;
+  }
+
+  .play-btn {
+    width: 30px;
+    height: 30px;
+    color: #FFF;
   }
+  .video-cover{
+    position: absolute;
+    width: 750rpx;
+    top: 0;
+    left: 0;
+  }
 </style>
\ No newline at end of file
diff --git a/static/template/swiper-vertical-video/play.png b/static/template/swiper-vertical-video/play.png
new file mode 100644
index 0000000000000000000000000000000000000000..aec2b9b994b7e5cfa209896ceb0591bb77b6b83a
GIT binary patch
literal 3485
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

literal 0
HcmV?d00001

-- 
GitLab