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


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 相关文章推荐
符合W3C网页标准的iframe标签的使用方法
Jul 19 Javascript
几个比较经典常用的jQuery小技巧
Mar 01 Javascript
JQuery 常用操作代码
Mar 14 Javascript
Windows8下搭建Node.js开发环境教程
Sep 03 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
JavaScript Base64 作为文件上传的实例代码解析
Feb 14 Javascript
bootstrap table操作技巧分享
Feb 15 Javascript
layui复选框限制选择个数的方法
Sep 18 Javascript
js实现图片3D轮播效果
Sep 21 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 Javascript
Vue中keep-alive的两种应用方式
Jul 15 Javascript
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文件操作的详细诠释
2013/06/21 PHP
PHP实现发送微博消息功能完整示例
2019/12/04 PHP
TP5框架使用QueryList采集框架爬小说操作示例
2020/03/26 PHP
getElementsByTagName vs selectNodes效率 及兼容的selectNodes实现
2010/02/26 Javascript
jQuery 打造动态下滑菜单实现说明
2010/04/15 Javascript
jquery+ashx无刷新GridView数据显示插件(实现分页、排序、过滤功能)
2010/04/25 Javascript
一些经常会用到的Javascript检测函数
2010/05/31 Javascript
js获取当前日期前七天的方法
2015/02/28 Javascript
JS实现可直接显示网页代码运行效果的HTML代码预览功能实例
2015/08/06 Javascript
JSON简介以及用法汇总
2016/02/21 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
总结jQuery插件开发中的一些要点
2016/05/16 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
js模式化窗口问题![window.dialogArguments]
2016/10/30 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
原生js封装的ajax方法示例
2018/08/02 Javascript
[59:30]VG vs LGD 2019国际邀请赛淘汰赛 胜者组 BO3 第二场 8.22
2019/09/05 DOTA
浅谈Python程序与C++程序的联合使用
2015/04/07 Python
Python实现抢购IPhone手机
2018/02/07 Python
Python装饰器简单用法实例小结
2018/12/03 Python
python输出电脑上所有的串口名的方法
2019/07/02 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
Python中zipfile压缩文件模块的基本使用教程
2020/06/14 Python
Python根据URL地址下载文件并保存至对应目录的实现
2020/11/15 Python
2014学雷锋活动总结
2014/03/09 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
珠宝店促销方案
2014/03/21 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
信访工作个人总结
2015/03/03 职场文书
中学综治宣传月活动总结
2015/05/07 职场文书
新闻通讯稿模板
2015/07/22 职场文书
字典算法实现及操作 --python(实用)
2021/03/31 Python
详解MySQL主从复制及读写分离
2021/05/07 MySQL
python实现股票历史数据可视化分析案例
2021/06/10 Python
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers