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> <template>
<view class="page"> <view class="page">
<view style="padding: 10px;"> <view class="header-tips" style="padding: 10px;">
<text>复用组件，无限滚动、加载、浏览视频的短视频模板</text> <text class="tip-text">当前示例为无限滚动、加载、浏览视频的短视频模板的演示，提供了组件复用的方式。为提高性能可见的视频项只有 3 个</text>
<text>【已知问题】swiper 组件竖滑动有 bug，先横向滑动</text> <view class="tip-status-box">
<text class="status-text">播放状态:</text>
<view style="flex-direction: row;font-size: 10px;"> <text class="status-text" v-for="(value,index) in state">第{{index+1}}个:{{value?'播放中':'已暂停'}}</text>
<view>【状态】</view> </view>
<text v-for="(value,index) in state"> </view>
第{{index+1}}个:{{value?'播放中':'已暂停'}} <swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange" @transition="onTransition">
</text> <swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i">
</view> <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> <view class="video-top-view" @click="changeState(i)">
<swiper class="swiper" :current="current" :circular="index != 0" :vertical="true" @change="onSwiperChange" <image v-if="!state[i]" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image>
@transition="onTransition"> </view>
<swiper-item class="swiper-item" v-for="(item,i) in visibleList" :key="i"> <view class="video-info">
<video :ref="'video-'+i" class="video" :id="item._id" :src="item.src" :poster="item.poster_src" <text class="video-info-text">容器：第 {{i}} 个</text>
:show-center-play-btn="false" :autoplay="false" :controls="false" :loop="true" <text class="video-info-text">内容：{{item.content}}</text>
@play="onPlay(i)" @pause="onPause(i)" </view>
></video> <view class="swiper-item-info">
<view class="video-top-view" @click="changeState(i)"> <text class="info-text">向上滑动查看下一个视频</text>
<image v-if="!state[i]" class="play-btn" src="/static/template/swiper-vertical-video/play.png" mode="widthFix"></image> </view>
</view> </swiper-item>
<view> </swiper>
<text>第：{{i}}个容器，内容：{{item.content}}</text> </view>
</view>
</swiper-item>
</swiper>
</view>
</template> </template>
<script> <script>
import { VideoNode } from "uts.sdk.modules.DCloudUniVideo"; 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; let page : number = 0;
export default { export default {
components:{}, components: {},
computed:{ computed: {
currentVideo():VideoNode{ currentVideo() : VideoNode {
console.log('"video-"+this.current',"video-"+this.current); console.log('"video-"+this.current', "video-" + this.current);
return this.$refs["video-"+this.current] as VideoNode return this.$refs["video-" + this.current] as VideoNode
} }
}, },
data() { data() {
return { return {
list: [] as ListItem[], list: [] as ListItem[],
visibleList: [] as ListItem[],// 提高性能 可见的只有3个 visibleList: [] as ListItem[],// 提高性能 可见的只有3个
current: 0 as number, current: 0 as number,
index: 0, index: 0,
state:[false,false,false] as boolean[] state: [false, false, false] as boolean[]
} }
}, },
beforeCreate() { beforeCreate() {
this.list = this.getData() this.list = this.getData()
this.visibleList = this.list.slice(0, 3) this.visibleList = this.list.slice(0, 3)
}, },
watch: { watch: {
current(current : number, oldCurrent : number) { current(current : number, oldCurrent : number) {
let changeNumber = current - oldCurrent let changeNumber = current - oldCurrent
if (changeNumber == 1 || changeNumber == -2) { if (changeNumber == 1 || changeNumber == -2) {
// console.error('向右'); // console.error('向右');
this.index++ this.index++
} else { } else {
// console.error('向左'); // console.error('向左');
this.index-- this.index--
} }
// //翻页（3项为一页） // //翻页（3项为一页）
if (Math.abs(changeNumber) == 2) { if (Math.abs(changeNumber) == 2) {
// console.log('翻页'); // console.log('翻页');
page = Math.floor(this.index / 3); page = Math.floor(this.index / 3);
// console.log(this.index); // console.log(this.index);
// console.log('page',page); // console.log('page',page);
// console.log('slice',3*page,3*page+3); // console.log('slice',3*page,3*page+3);
if (this.list.length < 3 * page + 3) { if (this.list.length < 3 * page + 3) {
let list : ListItem[] = this.getData() let list : ListItem[] = this.getData()
this.list.push(...list.toTypedArray()) this.list.push(...list.toTypedArray())
} }
let visibleList = this.list.slice(3 * page, 3 * page + 3) let visibleList = this.list.slice(3 * page, 3 * page + 3)
// 换数据 // 换数据
this.visibleList = visibleList this.visibleList = visibleList
} }
}, },
current(current){ current(current) {
this.state.forEach((val:boolean,index:number)=>{ this.state.forEach((val : boolean, index : number) => {
if(index === current){ if (index === current) {
this.doPlay(current) this.doPlay(current)
}else if(val){ } else if (val) {
// 除了选中的其他已经播放的都需要停止 // 除了选中的其他已经播放的都需要停止
this.doPause(index) this.doPause(index)
console.log('index:'+index+'已被执行暂停'); console.log('index:' + index + '已被执行暂停');
} }
}) })
} }
}, },
onReady() { onReady() {
// 一启动完成，就播放第一个 // 一启动完成，就播放第一个
this.doPlay(0) this.doPlay(0)
}, },
methods: { methods: {
changeState(index:number){ changeState(index : number) {
if(this.state[index]){ if (this.state[index]) {
this.doPause(index) this.doPause(index)
}else{ } else {
this.doPlay(current) this.doPlay(current)
} }
}, },
doPlay(index:number){ doPlay(index : number) {
(this.$refs["video-"+index] as VideoNode).play() (this.$refs["video-" + index] as VideoNode).play()
console.log("doPlay video-"+index); console.log("doPlay video-" + index);
}, },
doPause(index:number){ doPause(index : number) {
(this.$refs["video-"+index] as VideoNode).pause() (this.$refs["video-" + index] as VideoNode).pause()
console.log("doPause video-"+index); console.log("doPause video-" + index);
}, },
onPause(index:number){ onPause(index : number) {
this.state[index] = false this.state[index] = false
console.log('onPause',index); console.log('onPause', index);
}, },
onPlay(index:number){ onPlay(index : number) {
this.state[index] = true this.state[index] = true
console.log('onPlay',index); console.log('onPlay', index);
}, },
getData() : ListItem[] { getData() : ListItem[] {
/* Promise 暂不支持 /* Promise 暂不支持
Promise<void> Promise<void>
return new Promise((resolve) => { return new Promise((resolve) => {
resolve(); resolve();
});*/ });*/
let videoUrlList = [ let videoUrlList = [
'https://web-assets.dcloud.net.cn/unidoc/zh/video/uts.mp4', 'https://web-assets.dcloud.net.cn/unidoc/zh/video/uts.mp4',
'https://web-assets.dcloud.net.cn/unidoc/zh/video/uni-ai.mp4', 'https://web-assets.dcloud.net.cn/unidoc/zh/video/uni-ai.mp4',
'https://web-assets.dcloud.net.cn/unidoc/zh/video/uni-verify.mp4' 'https://web-assets.dcloud.net.cn/unidoc/zh/video/uni-verify.mp4'
] as string[] ] as string[]
let posterSrcList = [ let posterSrcList = [
'/static/template/swiper-vertical-video/poster/uni-uts.jpg', '/static/template/swiper-vertical-video/poster/uni-uts.jpg',
'/static/template/swiper-vertical-video/poster/uni-ai.jpg', '/static/template/swiper-vertical-video/poster/uni-ai.jpg',
'/static/template/swiper-vertical-video/poster/uni-verify.jpg' '/static/template/swiper-vertical-video/poster/uni-verify.jpg'
] as string[] ] as string[]
let list = [] as ListItem[]; let list = [] as ListItem[];
for (let i = 0; i < 6; i++) { for (let i = 0; i < 6; i++) {
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 + "条数据" + videoUrlList[i % 3],
"src": videoUrlList[i%3], "src": videoUrlList[i % 3],
"poster_src":posterSrcList[i%3] "poster_src": posterSrcList[i % 3]
} }
list.push(listItem) list.push(listItem)
} }
return list return list
}, },
onSwiperChange(e : SwiperChangeEvent) { onSwiperChange(e : SwiperChangeEvent) {
// console.error('SwiperChangeEvent',e.detail.current); // console.error('SwiperChangeEvent',e.detail.current);
this.current = e.detail.current; this.current = e.detail.current;
}, },
onTransition(/*e : SwiperTransitionEvent*/) { onTransition(/*e : SwiperTransitionEvent*/) {
// console.log('onTransition e.detail.dx', e.detail.dx); // console.log('onTransition e.detail.dx', e.detail.dx);
} }
} }
} }
</script> </script>
<style> <style>
.page { .page {
flex: 1; flex: 1;
/* width: 750rpx; */ /* width: 750rpx; */
} }
.swiper, .header-tips {
.swiper-item, margin: 10px;
.video, padding: 10px;
.video-top-view , background-color: #fff;
.video-cover { border-radius: 5px;
height: 750rpx;
} }
.swiper { .tip-text {
flex: 1; font-size: 14px;
/* border: 1px solid #000; */ color: #666;
} line-height: 18px;
}
.swiper-item {
flex: 1; .tip-status-box {
/* border: 1px solid red; */ margin-top: 10px;
padding: 10px 5px; }
position: relative;
} .status-text {
font-size: 14px;
.video {} color: #666;
}
.video-top-view {
position: absolute; .swiper,
top: 0; .swiper-item,
left: 0; .video,
justify-content: center; .video-top-view,
align-items: center; .video-cover {
align-content: center; height: 750rpx;
/* border: 1px solid red; */ }
flex: 1;
width: 750rpx; .swiper {
} flex: 1;
margin: 0 10px;
.play-btn { margin-bottom: 15px;
width: 30px; background-color: #fff;
height: 30px; border-radius: 5px;
color: #FFF; /* border: 1px solid #000; */
} }
.video-cover{
position: absolute; .swiper-item {
width: 750rpx; flex: 1;
top: 0; /* border: 1px solid red; */
left: 0; padding: 10px;
} 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;
}
.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 {
position: absolute;
width: 750rpx;
top: 0;
left: 0;
}
</style> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或