Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 5995
Star 90
Fork 162
H
hello uni-app x
提交 ff275360 编写于 作者: M mehaotian
浏览文件
操作

perf: 优化竖滑视频示例样式

上级 51791f5d
显示空白变更内容
内联 并排
Showing with 263 addition and 213 deletion
pages/template/swiper-vertical-video/swiper-vertical-video.uvue
浏览文件 @ ff275360
<template>
<view class="page">
<view style="padding: 10px;">
<text>复用组件，无限滚动、加载、浏览视频的短视频模板</text>
<view class="header-tips" style="padding: 10px;">
<text class="tip-text">当前示例为无限滚动、加载、浏览视频的短视频模板的演示，提供了组件复用的方式。为提高性能可见的视频项只有 3 个</text>
<text>【已知问题】swiper 组件竖滑动有 bug，先横向滑动</text>
<view style="flex-direction: row;font-size: 10px;">
<view>【状态】</view>
<text v-for="(value,index) in state">
第{{index+1}}个:{{value?'播放中':'已暂停'}}
</text>
<view class="tip-status-box">
<text class="status-text">播放状态:</text>
<text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{value?'播放中':'已暂停'}}</text>
</view>
</view>
<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">
<video :ref="'video-'+i" class="video" :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-'+i" class="video" :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-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 class="video-info">
<text class="video-info-text">容器：第 {{i}} 个</text>
<text class="video-info-text">内容：{{item.content}}</text>
</view>
<view class="swiper-item-info">
<text class="info-text">向上滑动查看下一个视频</text>
</view>
</swiper-item>
</swiper>
......@@ -31,15 +27,15 @@
</template>
<script>
import { VideoNode } from "uts.sdk.modules.DCloudUniVideo";
type ListItem = { _id : string, content : string, src : string ,poster_src :string }
type ListItem = { _id : string, content : string, src : string, poster_src : string }
let page : number = 0;
export default {
components:{},
computed:{
currentVideo():VideoNode{
console.log('"video-"+this.current',"video-"+this.current);
return this.$refs["video-"+this.current] as VideoNode
components: {},
computed: {
currentVideo() : VideoNode {
console.log('"video-"+this.current', "video-" + this.current);
return this.$refs["video-" + this.current] as VideoNode
}
},
data() {
......@@ -48,7 +44,7 @@
visibleList: [] as ListItem[],// 提高性能 可见的只有3个
current: 0 as number,
index: 0,
state:[false,false,false] as boolean[]
state: [false, false, false] as boolean[]
}
},
beforeCreate() {
......@@ -82,14 +78,14 @@
this.visibleList = visibleList
}
},
current(current){
this.state.forEach((val:boolean,index:number)=>{
if(index === current){
current(current) {
this.state.forEach((val : boolean, index : number) => {
if (index === current) {
this.doPlay(current)
}else if(val){
} else if (val) {
// 除了选中的其他已经播放的都需要停止
this.doPause(index)
console.log('index:'+index+'已被执行暂停');
console.log('index:' + index + '已被执行暂停');
}
})
}
......@@ -99,28 +95,28 @@
this.doPlay(0)
},
methods: {
changeState(index:number){
if(this.state[index]){
changeState(index : number) {
if (this.state[index]) {
this.doPause(index)
}else{
} else {
this.doPlay(current)
}
},
doPlay(index:number){
(this.$refs["video-"+index] as VideoNode).play()
console.log("doPlay video-"+index);
doPlay(index : number) {
(this.$refs["video-" + index] as VideoNode).play()
console.log("doPlay video-" + index);
},
doPause(index:number){
(this.$refs["video-"+index] as VideoNode).pause()
console.log("doPause video-"+index);
doPause(index : number) {
(this.$refs["video-" + index] as VideoNode).pause()
console.log("doPause video-" + index);
},
onPause(index:number){
onPause(index : number) {
this.state[index] = false
console.log('onPause',index);
console.log('onPause', index);
},
onPlay(index:number){
onPlay(index : number) {
this.state[index] = true
console.log('onPlay',index);
console.log('onPlay', index);
},
getData() : ListItem[] {
/* Promise 暂不支持
......@@ -146,9 +142,9 @@
let index = this.list.length + i;
let listItem : ListItem = {
"_id": "a00" + index,
"content": "这是第" + index + "条数据"+videoUrlList[i%3],
"src": videoUrlList[i%3],
"poster_src":posterSrcList[i%3]
"content": "这是第" + index + "条数据" + videoUrlList[i % 3],
"src": videoUrlList[i % 3],
"poster_src": posterSrcList[i % 3]
}
list.push(listItem)
}
......@@ -171,23 +167,50 @@
/* width: 750rpx; */
}
.header-tips {
margin: 10px;
padding: 10px;
background-color: #fff;
border-radius: 5px;
}
.tip-text {
font-size: 14px;
color: #666;
line-height: 18px;
}
.tip-status-box {
margin-top: 10px;
}
.status-text {
font-size: 14px;
color: #666;
}
.swiper,
.swiper-item,
.video,
.video-top-view ,
.video-top-view,
.video-cover {
height: 750rpx;
}
.swiper {
flex: 1;
margin: 0 10px;
margin-bottom: 15px;
background-color: #fff;
border-radius: 5px;
/* border: 1px solid #000; */
}
.swiper-item {
flex: 1;
/* border: 1px solid red; */
padding: 10px 5px;
padding: 10px;
position: relative;
}
......@@ -205,12 +228,39 @@
width: 750rpx;
}
.video-info {
margin-top: 10px;
}
.swiper-item-info {
position: absolute;
bottom: 15px;
left: 0;
right: 0;
flex-direction: row;
justify-content: center;
}
.info-text {
font-size: 12px;
color: #999;
}
.video-info-text {
font-size: 14px;
color: #666;
line-height: 20px;
}
.play-btn {
width: 30px;
height: 30px;
color: #FFF;
}
.video-cover{
.video-cover {
position: absolute;
width: 750rpx;
top: 0;
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或