微信小程序（实现抖音播放效果）上下滑动全屏播放效果

最近项目要做一个类似于抖音的一个视频播放需要小程序完成

在再次确定了需要这个需求的情况下就开始了（其实因为不是说这个功能不好做主要是但心做出来肯定不流畅卡顿什么的优化不好优化然后费了好大的劲优化了下也不是优化了下事吧所有有问题的都该了下梳理了下逻辑然后选了个最合适的方案给大家参考）

然后就开始啦

思路使用微信的 swiper 完成竖向滑动然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页（要处理自动播放的问题和加载多个有多个同时播放的问题）

另外需要说明下官方有扩展插件《video-swiper》不过这个把他不好去扩展然后不能有浮窗什么的因为我的需要礼物和评论什么的转发什么的模块（可参考）

效果图

代码

<swiper class="swiper" vertical='true' easing-function='default' bindchange='bindchange'><block wx:for="{{weishipinglist}}" wx:for-item="key" wx:key="*this"><swiper-item><view class="video-wrap">  <video wx:if="{{index==hkindex||index==hkindex-1||index==hkindex+1}}" show-center-play-btn="{{false}}"  id="myvideo{{index}}" class="video" src="{{key.videoid}}" loop show-fullscreen-btn="{{false}}" show-play-btn="{{false}}" enable-play-gesture controls="{{false}}" bindpause="bindpause" bindplay="bindplay"></video><button class="buy" bindtap="click">{{index}}</button> <!-- 这块用来写标题头像什么的 用 cover-view  cover-等等 --></view></swiper-item></block>
</swiper>

 data: {weishipinglist: [],//视频数据hkindex: 0,//滑块index},//动态更新当前滑块下标bindchange(e) {this.setData({hkindex: e.detail.current})let videoContext = wx.createVideoContext("myvideo" + e.detail.current + "")let videoContexta = wx.createVideoContext("myvideo" + indx + "")  indx = e.detail.current;videoContexta.pause();videoContexta.seek(0);videoContext.play();let xz = this.data.weishipinglist.length- e.detail.current ;if (xz == 3) {this.chaxunzhi();  //加载更多视频}this.qingygnanme();},

//css代码可能有多余的  我就不挑了 引入时自己按需引入吧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 .buy {width: 100rpx;height: 100rpx;line-height: 100rpx;border-radius: 50%;position: absolute;z-index: 100;bottom: 100rpx;left: 50rpx;font-size: 11pt;text-align: center;padding: 0px;
}.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;
}

完了需要注意的就是一个分页加载我设置的是8因为我们数据是一页10条会在第8条加载第二页数据

最近疫情严重各位小伙伴保重好身体哦~

微信小程序（实现抖音播放效果）上下滑动全屏播放效果相关推荐

微信小程序仿抖音，微视上下滑动整屏切换视频带关注，收藏
废话不多说直接附代码 wxml  <view class="videoBox"><view class=" ...
小程序仿微视_微信小程序仿抖音，微视上下滑动整屏切换视频带关注，收藏
废话不多说直接附代码 wxml 收藏分享电话关闭 @{{item.reallyName}} {{item.workProvince}}{{item.workCity}}{{item.workCo ...
微信小程序实现抖音切换视频效果
微信小程序实现抖音切换视频效果思路: 使用微信小程序的swiper组件,使其竖向滑动分页加载,每次加载3个视频,当滑动到只剩1个视频时加载下一页问题: 加载多个视频时,多个视频会同时播放效果图 ...
微信小程序仿抖音视频
微信小程序仿抖音视频使用轮播图实现视频滑动效果. wxml 部分 <view class="video-contain">&l ...
17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
微信小程序之抖音微视无限滑动视频列表自定义组件编写一.先上效果图看到上面,你可能首先会想到,使用swiper然后将swiper的circular设置为true,那么,想象一下,假如视频很多的情况下 ...
微信小程序仿抖音上下滑动整屏切换视频
微信小程序仿抖音上下滑动整屏切换视频使用官网上面的扩展组件官方使用的方式: 可结合自己业务修改: 使用官网上面的扩展组件 https://developers.weixin.qq.com/mini ...
从微信小程序到抖音小程序：转换指南
抖音小程序是一种新兴的小程序平台,与微信小程序类似,都是基于小程序框架的开发,不过两者的开发环境和API有所不同.如果你已经开发了一款微信小程序,想要将其转换为抖音小程序,可以按照以下步骤进行: 1. ...
微信小程序和抖音小程序的区别？如何选择？
随着5G的到来,电商向多元化新型电商的转型也已成时代必然.2020年,当我们的Vlog.自媒体行业风生水起时,依托第三方的电商平台销售模式已经逐渐难以满足新型电商的应用场景,例如微信的私域流量.抖音对 ...
微信小程序与抖音小程序的区别
1. 前缀区别:tt 与 wx 2. 调用前一个页面的方法时微信小程序 let pages = getCurrentPages(); let prePage = pages[pages.length ...
微信小程序仿抖音项目实战说明
功能说明短视频管理后台: 1.bgm管理(增删改查.文件上传.点击播放) 2.用户列表 3.举报管理 4.用户视频管理因为微信端Api接口管理后台是围绕微信端功能做的,所以这里我就将功能列举到一起 ...

微信小程序（实现抖音播放效果）上下滑动全屏播放效果

然后就开始啦

效果图

代码

最近疫情严重各位小伙伴保重好身体哦~

微信小程序（实现抖音播放效果）上下滑动全屏播放效果相关推荐

最新文章

热门文章