Skip to content

H
hello uni-app x

DCloud / hello uni-app x

通知 6016
Star 91
Fork 164
H
hello uni-app x
提交 6a2f77d5 编写于 作者: DCloud_JSON's avatar DCloud_JSON
浏览文件
操作

完善 短视频模板

上级 f420f999
隐藏空白更改
内联 并排
Showing with 193 addition and 102 deletion
pages.json
浏览文件 @ 6a2f77d5
...@@ -657,7 +657,8 @@ ...@@ -657,7 +657,8 @@
{ {
"path": "pages/template/scroll-fold-nav/scroll-fold-nav", "path": "pages/template/scroll-fold-nav/scroll-fold-nav",
"style": { "style": {
"navigationStyle": "custom" "navigationStyle": "custom",
"navigationBarTextStyle":"black"
} }
}, },
{ {
......
pages/template/swiper-vertical-video/swiper-vertical-video.uvue
浏览文件 @ 6a2f77d5
<template> <template>
<view class="page"> <view class="page">
<view style="padding: 20px;"> <view style="padding: 10px;">
<text>仿抖音，复用组件，无限滚动、加载、浏览视频的示例模板</text> <text>复用组件，无限滚动、加载、浏览视频的短视频模板</text>
<text>已知问题：</text>
<text>1.swiper 组件竖滑动有 bug，先横向滑动</text> <text>【已知问题】swiper 组件竖滑动有 bug，先横向滑动</text>
<text>2.uvue暂未支持video</text>
</view>
<swiper class="swiper" :current="current" :circular="index != 0" :vertical="false" @change="onSwiperChange" @transition="onTransition"> <view style="flex-direction: row;font-size: 10px;">
<swiper-item class="swiper-item" v-for="(item,index) in visibleList" :key="index"> <view>【状态】</view>
<!-- <video ref="video" class="video" :id="item.id" :ref="item.id" :src="item.src" :controls="false" :loop="true" <text v-for="(value,index) in state">
:show-center-play-btn="false"></video> --> 第{{index+1}}个:{{value?'播放中':'已暂停'}}
第：{{index}}个容器 </text>
数据内容：{{item.content}} </view>
</swiper-item> </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> </swiper>
</view> </view>
</template> </template>
<script> <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; let page : number = 0;
export default { export default {
data() { components:{},
return { computed:{
list: [] as ListItem[], currentVideo():VideoNode{
visibleList: [] as ListItem[],// 提高性能 可见的只有3个 console.log('"video-"+this.current',"video-"+this.current);
current: 0 as number, return this.$refs["video-"+this.current] as VideoNode
index: 0
} }
}, },
beforeCreate() { data() {
this.list = this.getData() return {
this.visibleList = this.list.slice(0, 3) list: [] as ListItem[],
}, visibleList: [] as ListItem[],// 提高性能 可见的只有3个
watch: { current: 0 as number,
current(current : number, oldCurrent : number) { index: 0,
let changeNumber = current - oldCurrent state:[false,false,false] as boolean[]
if (changeNumber == 1 || changeNumber == -2) { }
// console.error('向右'); },
this.index++ beforeCreate() {
} else { this.list = this.getData()
// console.error('向左'); this.visibleList = this.list.slice(0, 3)
this.index-- },
} watch: {
// //翻页（3项为一页） current(current : number, oldCurrent : number) {
if (Math.abs(changeNumber) == 2) { let changeNumber = current - oldCurrent
// console.log('翻页'); if (changeNumber == 1 || changeNumber == -2) {
page = Math.floor(this.index / 3); // console.error('向右');
// console.log(this.index); this.index++
// console.log('page',page); } else {
// console.log('slice',3*page,3*page+3); // console.error('向左');
if (this.list.length < 3 * page + 3) { this.index--
let list : ListItem[] = this.getData() }
this.list.push(...list.toTypedArray()) // //翻页（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 onReady() {
/* // 一启动完成，就播放第一个
// 不换数据，只换内容 this.doPlay(0)
for (let i = 0; i < 3; i++) {
this.visibleList[i].src = visibleList[i].src
this.visibleList[i].other = visibleList[i].other
}*/
}
}
}, },
methods: { methods: {
getData() : ListItem[] { changeState(index:number){
/* Promise 暂不支持 if(this.state[index]){
Promise<void> this.doPause(index)
return new Promise((resolve) => { }else{
resolve(); this.doPlay(current)
});*/
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)
} }
return list
}, },
onSwiperChange(e : SwiperChangeEvent) { doPlay(index:number){
// console.error('SwiperChangeEvent',e.detail.current); (this.$refs["video-"+index] as VideoNode).play()
this.current = e.detail.current console.log("doPlay video-"+index);
}, },
onTransition(e:SwiperTransitionEvent){ doPause(index:number){
console.log('onTransition e.detail.dx',e.detail.dx); (this.$refs["video-"+index] as VideoNode).pause()
} console.log("doPause video-"+index);
} },
} onPause(index:number){
</script> this.state[index] = false
console.log('onPause',index);
<style> },
.page { onPlay(index:number){
flex: 1; this.state[index] = true
/* width: 750rpx; */ console.log('onPlay',index);
} },
getData() : ListItem[] {
.swiper { /* Promise 暂不支持
flex: 1; Promise<void>
border: 1px solid #000; return new Promise((resolve) => {
} resolve();
});*/
.swiper-item { let list = [] as ListItem[];
flex: 1; for (let i = 0; i < 6; i++) {
border: 1px solid red; let index = this.list.length + i;
padding: 10px 5px; 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> </style>
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或