uniapp视频滚动(weex)
比swiper中嵌套video顺滑一点<template><div><div class="all" :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }"><list :pagingEnabled="true" @loadmore="loadmore" @scroll="sc
·
比swiper中嵌套video顺滑一点
<template>
<div>
<div class="all" :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }">
<list :pagingEnabled="true" @loadmore="loadmore" @scroll="scroll">
<cell v-for="(item, index) in dataList" :key="index" :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }">
<video
@click="selectVideo(index)"
:id="`id_${index}`"
:src="item.video_path"
:style="{ width: screenWidth + 'px', height: screenHeight + 'px' }"
:show-play-btn="false"
:controls="false"
:poster="item.image_path"
class="video"
ref="videoRef"
:enable-progress-gesture="false"
></video>
</cell>
</list>
</div>
</div>
</template>
<script>
var videoContext = null;
export default {
data() {
return {
dataList: [
{
video_path: 'xxxxxxxxxxxx',
image_path: 'xxxxxxxxxxxx?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,m_fast'
},
{
video_path: 'xxxxxxxxxxxx',
image_path: 'xxxxxxxxxxxx?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,m_fast'
},
{
video_path: 'xxxxxxxxxxxx',
image_path: 'xxxxxxxxxxxx?spm=qipa250&x-oss-process=video/snapshot,t_7000,f_jpg,m_fast'
}
],
screenWidth: uni.getSystemInfoSync().screenWidth,
screenHeight: uni.getSystemInfoSync().screenHeight,
index: 0,
play: false
};
},
methods: {
loadmore(e) {
uni.showToast({
title: '已经到滑到底了~',
icon: 'none',
duration: 2000,
position: 'bottom'
});
},
scroll(e) {
let _this = this;
if (_this.play) {
videoContext.stop();
_this.play = false;
}
this.index = Math.abs(e.contentOffset.y / this.screenHeight).toFixed(0);
_this.selectVideo(_this.index);
},
selectVideo(index) {
let _this = this;
videoContext = _this.$refs.videoRef[index];
if (!_this.play) {
videoContext.play();
_this.play = true;
} else {
videoContext.pause();
_this.play = false;
}
}
}
};
</script>
<style>
.all {
}
</style>
更多推荐
已为社区贡献2条内容
所有评论(0)