微信小程序实现抖音视频效果

最新推荐文章于 2025-03-16 12:00:13 发布

原创

最新推荐文章于 2025-03-16 12:00:13 发布 · 2.7k 阅读

标签

#微信小程序 #音视频 #小程序

收录于

文章提供了一个简化版的实现抖音视频效果的代码示例，包括WXML、WXSS和JS文件，适用于小程序开发。代码模块化，方便进行二次开发，支持视频滑动切换和播放控制。

当我们进行开发的时候可能会遇到需要实现抖音视频效果的需求，并且网上该效果的开源代码少，找到的开源代码代码量大，很难进行二次开发

对此我将自己的代码进行简化，仅留下可动性高的代码模块
在这里插入图片描述
以上是实现效果与此处demo的模板

wxml文件：

<swiper vertical="true" bindchange="nextVideo">
  <swiper-item wx:for="{
    
    {viList}}">
    <video loop="true" enable-progress-gesture="true"	object-fit="contain" src="{
    
    {item.vio}}" id="video{
    
    {index}}" />  
    <view class="video-right">
      <view class="video-right-img" style="margin-bottom: 10rpx; background-image: url({ 
       {item.avatar}})" data-user_id