回答-BFW问答

这个是模仿抖音上下滑屏短视频效果，支持pc端浏览器操作、手机端h5滑动操作、app端、各个平台小程序，带右侧操作按钮及标题评论显示，滑动到只剩下三个视频的时候主动请求服务端获取新的视频，为了提高性能，同一时间只会创建三个video标签，上一个，现在播放的、还有下一个视频，这也是为了增加用户体验，上下切换非常丝滑，可转换为其他小程序或app、h5页面，全平台兼容。
代码如下：
<template>

<view style="height:100%;">

<swiper class="swiper" vertical="true" easing-function="default" @change="bindchange" @tap="videohandle">

  <block v-for="(key, index) in shortvideolist" :key="index">

    <swiper-item>

      <view class="video-wrap">



        <cover-image v-if="!playing" style class="playiconimg" src="https://repo.bfw.wiki/bfwrepo/image/5ff8ef3f20eea.png"></cover-image>





        <video v-if="index==hkindex||index==hkindex-1||index==hkindex+1" :show-center-play-btn="false" :id="'myvideo' + index" class="video" :src="key.videourl" loop :show-fullscreen-btn="false" :show-play-btn="false" object-fit="cover" enable-play-gesture :controls="false" @pause="bindpause" @play="bindplay"></video>

        <cover-view v-if="index==hkindex||index==hkindex-1||index==hkindex+1" class="title">

			<cover-view>@美好旅行官</cover-view>

			

						<cover-view>好美的风景啊，这想去看看！！</cover-view>

		</cover-view>

        <!-- 这块用来写标题头像什么的 用 cover-view  cover-等等 -->





        <cover-view class="icon-container" v-if="index==hkindex||index==hkindex-1||index==hkindex+1">

          <cover-view class="cover-view-item avatar-cont">

            <cover-image class="video-icon avatar" src="//repo.bfw.wiki/bfwrepo/image/61e27364c2151.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_200,h_200,/quality,q_90"></cover-image>

            <cover-image class="focus" src="//repo.bfw.wiki/bfwrepo/icon/6229edf792f1f.png"></cover-image>



          </cover-view>

          <cover-view class="cover-view-item" @tap.stop="love">

            <cover-image class="video-icon" :src="islove?'//repo.bfw.wiki/bfwrepo/icon/5d834be1e8f47.png':'//repo.bfw.wiki/bfwrepo/icon/5ff8f1528e5f1.png'"></cover-image>

            <cover-view class="text-white">1.1k</cover-view>

          </cover-view>



          <cover-view class="cover-view-item" @tap.stop="comment">

            <cover-image class="video-icon" src="//repo.bfw.wiki/bfwrepo/icon/6229e8c7dbc82.png"></cover-image>

            <cover-view class="text-white">1.1k</cover-view>

          </cover-view>



          <cover-view class="cover-view-item" @tap.stop="share">

            <cover-image class="video-icon" src="//repo.bfw.wiki/bfwrepo/image/5ff8ee1070a63.png"></cover-image>

            <cover-view class="text-white">1.1k</cover-view>

          </cover-view>



        </cover-view>

      </view>

    </swiper-item>

  </block>

</swiper>



<cover-view class="topbar">

	<cover-view>首页</cover-view>

		<cover-view style="font-weight: bold;color: white;">推荐</cover-view>

			<cover-view>关注</cover-view>

</cover-view>

<cover-view v-if="showcomment" style="z-index: 11111;position: absolute;bottom: 0;left: 0;color: white;background-color: red;width: 100%;">



  <cover-view>

    <cover-view class="cu-dialog" style="width:100%;height: 100%;">

      <cover-view class="cu-bar bg-white">

        <cover-view class="action text-grey">共12条评论</cover-view>

        <cover-view class="action text-red " @tap="hideModal">关闭</cover-view>

      </cover-view>

      <cover-view class="padding-sm">

        <cover-view class="cu-list menu-avatar">

          <cover-view class="cu-item flex">

            <cover-image class="cu-avatar round lg margin-top" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"></cover-image>

            <cover-view class="content flex-sub" style="margin-right: 100rpx;">

              <cover-view class="text-grey padding">正义天使 凯尔</cover-view>

              <cover-view class="text-gray text-sm flex justify-between padding-left ">

                十天前



              </cover-view>

            </cover-view>



            <cover-view class="text-gray text-sm padding text-center fr">

              30

              <cover-image src="//repo.bfw.wiki/bfwrepo/image/5f9e9e7005148.png" style="width: 26rpx;height: 26rpx;"></cover-image>



            </cover-view>

          </cover-view>

        </cover-view>



        <cover-view class="cu-list menu-avatar">

          <cover-view class="cu-item flex">

            <cover-image class="cu-avatar round lg margin-top" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"></cover-image>

            <cover-view class="content flex-sub" style="margin-right: 100rpx;">

              <cover-view class="text-grey padding">正义天使 凯尔</cover-view>

              <cover-view class="text-gray text-sm flex justify-between padding-left ">

                十天前



              </cover-view>

            </cover-view>



            <cover-view class="text-gray text-sm padding text-center fr">

              30

              <cover-image src="//repo.bfw.wiki/bfwrepo/image/5f9e9e7005148.png" style="width: 26rpx;height: 26rpx;"></cover-image>



            </cover-view>

          </cover-view>

        </cover-view>



        <cover-view class="cu-list menu-avatar">

          <cover-view class="cu-item flex">

            <cover-image class="cu-avatar round lg margin-top" src="https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg"></cover-image>

            <cover-view class="content flex-sub" style="margin-right: 100rpx;">

              <cover-view class="text-grey padding">正义天使 凯尔</cover-view>

              <cover-view class="text-gray text-sm flex justify-between padding-left ">

                十天前



              </cover-view>

            </cover-view>



            <cover-view class="text-gray text-sm padding text-center fr">

              30

              <cover-image src="//repo.bfw.wiki/bfwrepo/image/5f9e9e7005148.png" style="width: 26rpx;height: 26rpx;"></cover-image>



            </cover-view>

          </cover-view>

        </cover-view>

      </cover-view>

    </cover-view>

  </cover-view>



</cover-view>

</view>

</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": "风景非常好，春天来了，让我们一起来踏春吧！！！！",

        "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: false

    };

  },



  components: {

    scrollVideo

  },

  props: {},



  /**

   * 生命周期函数--监听页面加载

   */

  onLoad: function (options) {},



  /**

   * 生命周期函数--监听页面初次渲染完成

   */

  onReady: function () {},



  /**

   * 生命周期函数--监听页面显示

   */

  onShow: function () {

    if (this.shortvideolist.length > 0) {

      uni.createVideoContext("myvideo0").play();

    }

  },



  /**

   * 生命周期函数--监听页面隐藏

   */

  onHide: function () {},



  /**

   * 生命周期函数--监听页面卸载

   */

  onUnload: function () {},



  /**

   * 页面相关事件处理函数--监听用户下拉动作

   */

  onPullDownRefresh: function () {},



  /**

   * 页面上拉触底事件的处理函数

   */

  onReachBottom: function () {},



  /**

   * 用户点击右上角分享

   */

  onShareAppMessage: function () {},

  methods: {

    videohandle() {

      let lastvideocontext = uni.createVideoContext("myvideo" + this.hkindex);



      if (lastvideocontext != undefined) {

        if (this.playing) {

          lastvideocontext.pause();

          this.setData({

            playing: false

          });

        } else {

          lastvideocontext.play();

          this.setData({

            playing: true

          });

        }

      }

    },



    love() {

      if (this.islove) {

        this.setData({

          islove: false

        });

      } else {

        this.setData({

          islove: true

        });

      }

    },



    comment() {

      this.setData({

        showcomment: true

      });

    },



    hideModal() {

      this.setData({

        showcomment: false

      });

    },



    //动态更新当前滑块下标

    bindchange(e) {

      this.setData({

        hkindex: e.detail.current,

        playing: true

      });

      var lastvideoid = e.detail.current - 1;

      var nextvideoid = e.detail.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" + e.detail.current + "");

      videoContext.pause();

      videoContext.seek(0);

      videoContext.play();

      let xz = this.shortvideolist.length - e.detail.current;



      if (xz == 3) {

        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.setData({

          shortvideolist: listv.concat(nextlist)

        });  //加载更多视频

      } 



    },



    bindpause(e) {

      console.log("暂停播放");

    },



    bindplay(e) {

      console.log("开始播放");

    },



    share() {

      console.log("占位：函数 share 未声明");

    },



    click() {

      console.log("占位：函数 click 未声明");

    }



  }

};

</script>

<style>

.topbar{

	position: absolute;

	z-index: 11;

	top:20px;

	width: 200px;

	left:90px;

	display: flex;

	color:#f8f8f8;

	font-size: 20px;

	

}

.topbar cover-view{

	padding: 12px;

}

page {

  width: 100%;

  height: 100%;



}



.video-wrap {

  width: 100%;

  height: 100%;

  position: relative;

  /* border: 1px dashed red; */

}



.video-wrap video {

  width: 100%;

  height: 100%;

  position: absolute;

  top: 0px;

  left: 0;

  z-index: 1;

}



.video-wrap .title {



  height: 100rpx;

  line-height: 100rpx;



  position: absolute;

  z-index: 100;

  bottom: 150rpx;

  left: 50rpx;

  right: 100rpx;

  font-size: 40rpx;

  text-align: left;

  padding: 0px;

  color: white;

}

.playiconimg{

  width: 100rpx;

  height: 100rpx;

  position:absolute;

  top:50%;

  left: 45%;

  z-index: 12;

}

.swiper {

  width: 100%;

  height: 100%;

}



.tentbiaot {

  width: 400rpx;

  font-size: 30rpx;

  color: #fff;

  z-index: 99;

  white-space: normal;

  line-height: 40rpx;

  margin-top: 20rpx;

}



.diwen {

  width: 400rpx;

  color: #fff;

  z-index: 99;

  display: flex;

  align-items: center;

}



.toixaign {

  width: 50rpx;

  height: 50rpx;

  border-radius: 50rpx;

  margin-right: 10rpx;

}



.teiename {

  font-size: 34rpx;

  margin-right: 10rpx;

}



.diwe {

  display: flex;

  position: fixed;

  bottom: 100rpx;

  flex-direction: column;

  z-index: 99;

  left: 40rpx;

}





.dianzaidijila {

  width: 100rpx;

  position: fixed;

  right: 30rpx;

  bottom: 80rpx;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  z-index: 99;

}



.tuaobiao {

  display: flex;

  align-items: center;

  flex-direction: column;

  justify-content: center;

  margin-bottom: 30rpx;

}



.tobimg{

  width: 60rpx;

  height: 50rpx;

}



.tobimglw{

  width: 60rpx;

  height: 60rpx;

  margin-bottom: 20rpx;

}



.zitiet{

  color: #fff;  

  font-size: 26rpx;

  margin-top: 6rpx;

}



.zhaunfanan {

  width: 60rpx;

  height: 50rpx;

  padding: 0rpx;

  border: none !important;

  line-height: 0rpx;

}



.zhaunfananas {

  width: 60rpx;

  height: 50rpx;

}

.icon-container {

  height: 100%;

  position: absolute;

  right: 40rpx;

  display: flex;

  flex-direction: column;

  justify-content: flex-end;

  z-index: 999;

  text-align: center;

  width: 100rpx;





}



.cover-view-item {

  width: 100rpx;

  height: 150rpx;



  margin-bottom: 30rpx;

}

.avatar-cont{

  position:relative;

  height: 156rpx;

}

.avatar {

  





  height: 86rpx;

  width: 86rpx;





  height: 86rpx;

  border: 8rpx solid white;

  border-radius: 86rpx;





}

.focus{

  position:absolute;

  width: 40rpx;

  height: 40rpx;

  bottom: 18px;

  left: 12px;

}



.video-icon {

  

  width: 86rpx;

  height: 86rpx;

  display: inline-block;

}



.icon-bar {

  font-size: 66rpx;

}





</style>
完整hbuilder项目源码下载：
点击打开链接
回答

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

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

部署一套内网离线ai助理

私有ai助理开发

类似如家的租房app开发

h5手机端考试网站开发

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

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

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

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

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

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

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

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

DeepSeek NSA技术是啥？

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

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

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

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

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