微信小程序抖音效果

最新推荐文章于 2025-09-24 17:51:47 发布

原创最新推荐文章于 2025-09-24 17:51:47 发布 · 1.9k 阅读

20 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

微信小程序专栏收录该内容

4 篇文章

订阅专栏

本文围绕微信小程序实现抖音效果展开，介绍了三种方法。一是在 swiper-item 里放 video，存在视频加载黑屏及开发工具报错问题；二是用定位、动画实现，代码长被放弃；三是使用 WeUI video - swiper，安装后视频无法放出也被放弃。

微信小程序抖音效果

方法一：swiper-item 里放video

看见有人说这样不能放，有人说现在可以放了，我放了之后可以滑动，效果还行
wxml:

<swiper vertical="true" style="height:100vh;" bindchange="change" wx:if="{{video.length>0}}">
  <block wx:for="{{video}}" wx:key="unique">
    <swiper-item>
      <view class="one_video">
      	 <!-- video 的src 不能是本地的地址 -->
        <video id="video{{index}}" src="{{item.src}}" binderror="videoErrorCallback"  ad-unit-id="{{item.id}}" auto-pause-if-open-native="{{true}}" custom-cache="{{false}}">
        </video>
      </view>
    </swiper-item>
  </block>
</swiper>

 onReady: function () {
    let video = []//你的视频数组
    this.setData({
      video:video
    })
    let id = "video0"
    this.videoContext = wx.createVideoContext(id)//指定一个视频播放
    this.videoContext.play()
  },
  //切换swiper
  change(e){
  	//当前播放的视频暂停，置零
    this.videoContext.stop()
    this.videoContext.seek(0)
    //指定滑到的这个视频播放
    let id = e.detail.current
    this.videoContext = wx.createVideoContext('video'+id)
    this.videoContext.play()
  },