可以使用swiper+video实现原生的高性能无卡顿的类似抖音上下滑动切换视频效果，而且自动加载更多视频，保证页面内只有三个video实例，减少内存开销：
代码如下：
点击查看全文
<template>
<div style="height:600px;">
<swiper class="swiper" vertical easing-function="default" @change="bindchange" style="height:600px;" >
<swiper-item style="height: 600px;" v-for="(key, index) in shortvideolist" :key="index">
<div style="height:600px; display: flex;flex-direction: column;flex:1;" >
<!-- <cover-image v-if="!playing" class="playiconimg" src="https://repo.bfw.wiki/bfwrepo/image/5ff8ef3f20eea.png"></cover-image> -->
<video style="height:600px;" v-if="index==hkindex||index==hkindex-1||index==hkindex+1" :show-center-play-btn="false" :id="'myvideo' + index" class="video" :src="key.videourl" :poster="key.videoimg" loop :show-fullscreen-btn="false" :show-play-btn="false" object-fit="cover" enable-play-gesture :controls="false" @pause="bindpause" @play="bindplay"></video>
<div style=" margin-top: -100px;color:white"><text style=" color:white">@上岛咖啡的时间里福建省龙卷风蓝色科技的方式来上登录付会计</text></div>
<div style=" margin-top: -100px;width:600px;"><text style=" color:white">@美化景色33</text></div>
<div style=" margin-top: -330px;margin-left:300px;height:400px;display: flex; align-items: center;">
<div class="div-item avatar-cont" style="margin-top:10px;display: flex;align-items: center;" >
<image class="video-icon" style="width:40px;height:40px;border-radius: 30px;" src="../../static/images/userimg.png"></image>
<image class="focus" style="width:10px;height:10px;justify-content: center;" src="../../static/images/plus.png"></image>
</div>
<div class="div-item" @tap="clicnone" style="margin-top:10px;">
<image class="video-icon" style="width:40px;height:40px;" src="../../static/images/love.png"></image>
<text style="color: white;font-size:12px;margin-top:10px;text-align: center;width:40px;">112</text>
</div>
<div class="div-item" @tap="comment" style="margin-top:10px;">
<image class="video-icon" style="width:40px;height:40px;" src="../../static/images/message.png"></image>
<text style="color: white;font-size:12px;margin-top:10px;text-align: center;width:40px;">1.1k</text>
</div>
<div class="div-item" @tap="clicnone" style="margin-top:10px;">
<image class="video-icon" style="width:40px;height:40px;" src="../../static/images/share.png"></image>
<text style="color: white;font-size:12px;margin-top:10px;text-align: center;width:40px;">1.1k</text>
</div>
</div>
</div>
</swiper-item>
</swiper>
</div>
</template>
<script>
import scrollVideo from "../component/shortvideo/shortvideo";
export default {
data() {
return {
shortvideolist: [{
"typeid": 3,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90",
"videoname": "风景非常好，春天来13242，让我们一起来踏春吧！！！！",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b73015fb.mp4"
}, {
"typeid": 7,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90",
"videoname": "风景非常好，春天来了，让我们一起来踏春吧！！！！",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b60d3996.mp4"
}, {
"typeid": 5,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90",
"videoname": "风景非常好，春天来了，让我们一起来踏春吧！！！！",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}, {
"typeid": 5,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90",
"videoname": "风景非常好，春天来了，让我们一起来踏春吧！！！！",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}, {
"typeid": 5,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90",
"videoname": "风景非常好，春天来了，让我们一起来踏春吧！！！！",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}, {
"typeid": 5,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90",
"videoname": "风景非常好，春天来了，让我们一起来踏春吧！！！！",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}, {
"typeid": 5,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90",
"videoname": "风景非常好，春天来了，让我们一起来踏春吧！！！！",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}],
hkindex: 0,
//滑块index,
playing: true,
islove: false,
showcomment: true
};
},
components: {
scrollVideo
},
props: {},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
if (this.shortvideolist.length > 0) {
this.$nextTick(function(){
uni.createVideoContext("myvideo0").play();
})
//setTimeout(function(){uni.createVideoContext("myvideo0").play();},1000)
}
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {},
methods: {
stopTouchMove(){
return true;
},
videohandle() {
let lastvideocontext = uni.createVideoContext("myvideo" + this.hkindex);
if (lastvideocontext != undefined) {
if (this.playing) {
lastvideocontext.pause();
this.playing=false;
} else {
lastvideocontext.play();
this.playing=true;
}
}
},
love() {
console.log("1212313")
if (this.islove) {
this.setData({
islove: false
});
} else {
this.setData({
islove: true
});
}
},
comment() {
this.setData({
showcomment: true
});
},
hideModal() {
this.setData({
showcomment: false
});
},
chageit(current){
this.hkindex=current
this.playing=true
var lastvideoid = current - 1;
if(lastvideoid<0){
lastvideoid=0;
}
var nextvideoid = current + 1;
let lastvideocontext = uni.createVideoContext("myvideo" + lastvideoid);
if (lastvideocontext != undefined) {
lastvideocontext.pause();
}
let nextvideocontext = uni.createVideoContext("myvideo" + nextvideoid);
if (nextvideocontext != undefined) {
nextvideocontext.pause();
}
let videoContext = uni.createVideoContext("myvideo" +current + "");
videoContext.pause();
videoContext.seek(0);
videoContext.play();
let xz = this.shortvideolist.length -current;
if (xz == 3) {
console.log("加载更多")
var listv = this.shortvideolist;
var nextlist = [{
"typeid": 3,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90",
"videoname": "风景非常好，春天来了，让我们一起来踏春吧！！！！",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b73015fb.mp4"
}, {
"typeid": 7,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90",
"videoname": "风景非常好，春天来了，让我们一起来踏春吧！！！！",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b60d3996.mp4"
}, {
"typeid": 5,
"videoimg": "https://repo.bfw.wiki/bfwrepo/image/61ac60be5ec44.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_400,/quality,q_90",
"videoname": "风景非常好，春天来了，让我们一起来踏春吧！！！！",
"videourl": "https://repo.bfw.wiki/bfwrepo/video/62298b941b881.mp4"
}];
this.shortvideolist=listv.concat(nextlist)
}
},
//动态更新当前滑块下标
bindchange(e) {
var that=this;
let current=e.detail.current;
setTimeout(function(){
that.chageit(current)
},400);
},
bindpause(e) {
console.log("暂停播放");
},
bindplay(e) {
console.log("开始播放");
},
}
};
</script>
<style>
</style> 网友回复
我知道答案，我要回答
私活外包
