微信小程序 抖音效果

微信小程序 抖音效果

方法一：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>

js

 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()
  },

一开始自己尝试的时候，发现这个视频数组太长，有十几个的时候，有的视频加载不出来，是黑屏，后来对接接口之后可能视频没那么多，目前是没有问题的，之后有问题再补充吧

“渲染层网络层错误”问题

有人说这个真机是没有问题的，具体为什么开发工具会报错，我也不知道

方法二：用定位、动画之类的实现

这个我看了下别人写的代码，太长了，懒得敲，就pass掉这个方案了，这个想找也找得到

方法三：WeUI video-swiper

这个也尝试了一下，官方文档也有例子
因为这个是扩展组件，必须使用npm安装

安装方法：https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/

官方使用方法和例子：https://developers.weixin.qq.com/miniprogram/dev/extended/component-plus/video-swiper.html

不知道什么原因，我使用官方的例子，视频放不出来，自己尝试写，视频也没有放出来，然后就pass掉了，可能是自己学艺不精吧

就这样，有什么忘记写的，之后再补充吧
本人学习前端一年，努力努力再努力