回答-BFW问答

可以使用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>

回答

开发了一个网站ai聊天助手

一个月开发一套类似coze的智能体平台

部署一套内网离线ai助理

私有ai助理开发

类似如家的租房app开发

h5手机端考试网站开发

开发一个短剧解锁剧集的小程序

我要开发一个酒类拍卖交易平台

开发艺术品拍卖收藏买画卖画h5网站

帮我做个数字货币交易所网站

php如何检测mp3或wav音频时长？

ai如何在直播间介绍摄像头拍摄的实物智能实时与观众公屏互动？

ai如何理解长视频内容智能剪辑成精华短视频？

python如何实时在麦克风中识别多个不同人说话的声音并转成文字？

DeepSeek NSA技术是啥？

有哪些免费rpa可以自动抓取网页列表数据？

微信小程序如何保持屏幕不息屏常亮？

微信小程序麦克风录音时如何保持熄屏继续录音？

微信语音识别如何屏蔽手机扬声器播放的声音，只识别真人说话？

微信小程序如何只识别指定人说话声音转文字？