提交 ae9298ec 编写于 作者: DCloud_JSON's avatar DCloud_JSON

Update swiper-vertical-video.uvue

上级 55ac563c
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
<view class="page"> <view class="page">
<swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange" @transition="onTransition"> <swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange" @transition="onTransition">
<swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i"> <swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
<video :ref="'video-'+i" class="video-box" :id="item._id" :src="item.src" :poster="item.poster_src" :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video> <video ref="video" class="video-box" :id="item._id" :src="item.src" :poster="item.poster_src" :show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" @play="onPlay(i)" @pause="onPause(i)"></video>
<view class="video-cover" @click="changeState(i)"> <view class="video-cover" @click="changeState(i)">
<image v-if="!state[i]" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image> <image v-if="!state[i]" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
</view> </view>
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
</view> </view>
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="debug-info"> <view class="debug-info" v-if="0">
<text class="status-text">debug-info 播放状态:</text> <text class="status-text">debug-info 播放状态:</text>
<text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{value?'播放中':'已暂停'}}</text> <text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{value?'播放中':'已暂停'}}</text>
</view> </view>
...@@ -90,11 +90,11 @@ ...@@ -90,11 +90,11 @@
} }
}, },
doPlay(index : number) { doPlay(index : number) {
console.log("doPlay video-" + index,this.$refs["video-" + index]); // console.log("doPlay video" + index,(this.$refs["video"] as VideoNode[])[0] );
(this.$refs["video-" + index] as VideoNode).play() (this.$refs["video"] as VideoNode[])[index].play()
}, },
doPause(index : number) { doPause(index : number) {
(this.$refs["video-" + index] as VideoNode).pause() (this.$refs["video"] as VideoNode[])[index].pause()
console.log("doPause video-" + index); console.log("doPause video-" + index);
}, },
onPause(index : number) { onPause(index : number) {
...@@ -129,7 +129,7 @@ ...@@ -129,7 +129,7 @@
let index = this.list.length + i; let index = this.list.length + i;
let listItem : ListItem = { let listItem : ListItem = {
"_id": "a00" + index, "_id": "a00" + index,
"content": "这是第" + index + "条数据" + videoUrlList[i % 3], "content": "这是第" + index + "条数据,url地址" + videoUrlList[i % 3],
"src": videoUrlList[i % 3], "src": videoUrlList[i % 3],
"poster_src": posterSrcList[i % 3] "poster_src": posterSrcList[i % 3]
} }
...@@ -200,6 +200,7 @@ ...@@ -200,6 +200,7 @@
position: fixed; position: fixed;
top:15px; top:15px;
width: 750rpx; width: 750rpx;
background-color: rgba(255, 255, 255, 0.3);
} }
.status-text{ .status-text{
color:red; color:red;
......
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册