小程序 抖音效果

小程序 抖音效果

方法一：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 = video0this.videoContext = (id)//指定一个视频播放this.videoContext.play()},//切换swiperchange(e){//当前播放的视频暂停，置零this.videoContext.stop()this.videoContext.seek(0)//指定滑到的这个视频播放let id = e.videoContext = (	video	id)this.videoContext.play()},

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

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

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

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

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

方法三：WeUI video-swiper

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

安装方法：/

官方使用方法和例子：.html

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

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