微信小程序实现抖音播放效果的实例代码


Posted in Javascript onApril 11, 2020

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

微信小程序实现抖音播放效果的实例代码

在再次确定了需要这个需求的情况下就开始了(其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化)

然后就开始啦

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

效果图

微信小程序实现抖音播放效果的实例代码

代码

<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}}" class="video" autoplay="{{true}}" lopp='{{true}}' src="{{key.videoid}}" enable-play-gesture='{{true}}' show-fullscreen-btn='{{false}}' controls='{{false}}' vslide-gesture-in-fullscreen='{{false}}' show-play-btn='{{false}}' enable-progress-gesture='{{false}}' show-mute-btn='{{false}}'></video>
				 <button class="buy" bindtap="click">{{index}}</button> 
			</view>
		</swiper-item>
	</block>
</swiper>
data: {
  weishipinglist: [],//视频数据
  hkindex: 0,//滑块index
 },
 //动态更新当前滑块下标
 bindchange(e) {
  this.setData({
   hkindex: e.detail.current
  })
  if (e.detail.current%10 == 7) {
   this.chaxunzhi(); //此处是表示在快要加载完了需在分页请求加载
  }
 },
//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;
}

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

wx:if="{{index==hkindex}}" 这个起到的是控制加载要不会多个同时播放没刷到的也会播放 现在只会播放当前页面视频

总结

到此这篇关于微信小程序实现抖音播放效果的实例代码的文章就介绍到这了,更多相关微信小程序抖音播放内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
JavaScript对象的property属性详解
Apr 01 Javascript
javascript 使用for循环时该注意的问题-附问题总结
Aug 19 Javascript
Jq通过td获取同行其它列td的方法
Oct 05 Javascript
Angular页面间切换及传值的4种方法
Nov 04 Javascript
js初始化验证实例详解
Nov 26 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
jQuery实现可拖动进度条实例代码
Jun 21 jQuery
简单谈谈js的数据类型
Sep 25 Javascript
angular 组件通信的几种实现方式
Jul 13 Javascript
微信小程序实现图片上传放大预览删除代码
Jun 28 Javascript
JS如何实现封装列表右滑动删除收藏按钮
Jul 23 Javascript
Vue+penlayers实现多边形绘制及展示
Dec 24 Vue.js
JS中间件设计模式的深入探讨与实例分析
Apr 11 #Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 #Javascript
js函数柯里化的方法和作用实例分析
Apr 11 #Javascript
js点击事件的执行过程实例分析【冒泡与捕获】
Apr 11 #Javascript
JavaScript运行机制实例分析
Apr 11 #Javascript
js中调用微信的扫描二维码功能的实现代码
Apr 11 #Javascript
微信公众号中的JSSDK接入及invalid signature等常见错误问题分析(全面解析)
Apr 11 #Javascript
You might like
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP实现导出excel数据的类库用法示例
2016/10/15 PHP
PHP redis实现超迷你全文检索
2017/03/04 PHP
javascript学习笔记(十六) 系统对话框(alert、confirm、prompt)
2012/06/20 Javascript
JavaScript实现强制重定向至HTTPS页面
2015/06/10 Javascript
window.onerror()的用法与实例分析
2016/01/27 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
浅谈js图片前端预览之filereader和window.URL.createObjectURL
2016/06/30 Javascript
javascript中的try catch异常捕获机制用法分析
2016/12/14 Javascript
基于Vue2实现的仿手机QQ单页面应用功能(接入聊天机器人 )
2017/03/30 Javascript
JavaScript装饰器函数(Decorator)实例详解
2017/03/30 Javascript
微信小程序实现动态改变view标签宽度和高度的方法【附demo源码下载】
2017/12/05 Javascript
详解使用VueJS开发项目中的兼容问题
2018/08/02 Javascript
vue-content-loader内容加载器的使用方法
2018/08/05 Javascript
vue配置nprogress实现页面顶部进度条
2019/09/21 Javascript
构建Vue大型应用的10个最佳实践(小结)
2019/11/07 Javascript
微信小程序激励式视频广告组件使用详解
2019/12/06 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
2019/12/12 Javascript
Paypal支付不完全指北
2020/06/04 Javascript
在Python中使用CasperJS获取JS渲染生成的HTML内容的教程
2015/04/09 Python
Python编程中的for循环语句学习教程
2015/10/14 Python
Python中index()和seek()的用法(详解)
2017/04/27 Python
python使用pil进行图像处理(等比例压缩、裁剪)实例代码
2017/12/11 Python
Python下使用Scrapy爬取网页内容的实例
2018/05/21 Python
pandas 选择某几列的方法
2018/07/03 Python
图解Python中深浅copy(通俗易懂)
2020/09/03 Python
利用python 读写csv文件
2020/09/10 Python
美国第二大连锁药店:Rite Aid
2019/04/03 全球购物
params有什么用
2016/03/01 面试题
幼师自荐信范文
2013/10/06 职场文书
企业演讲比赛主持词
2014/03/18 职场文书
2015年计生协会工作总结
2015/04/24 职场文书
人民检察院起诉书
2015/05/20 职场文书
2019年最新七夕唯美祝福语(60条)
2019/07/22 职场文书
导游词之台湾阿里山
2019/10/23 职场文书
MYSQL数据库使用UTF-8中文编码乱码的解决办法
2021/05/26 MySQL