php做抖音在微信中播放,微信小程序实现抖音播放效果的实例代码
最近项目要做一个类似于抖音的一个视频播放 需要小程序完成
在再次确定了需要这个需求的情况下就开始了(其实因为不是说这个功能不好做主要是但心做出来肯定不流畅 卡顿什么的 优化不好优化)
然后就开始啦
思路使用微信的 swiper 完成竖向滑动 然后分页加载首先先加载一次加载10个当滑动到第7个的时候加载下一页 (要处理自动播放的问题和加载多个有多个同时播放的问题)
效果图
代码
{{index}}
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}}" 这个起到的是控制加载要不会多个同时播放没刷到的也会播放 现在只会播放当前页面视频
总结
到此这篇关于微信小程序实现抖音播放效果的实例代码的文章就介绍到这了,更多相关微信小程序抖音播放内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
php做抖音在微信中播放,微信小程序实现抖音播放效果的实例代码相关推荐
- 企业微信中打开的小程序wx.qy.getEnterpriseUserInfo接口调用报错42013
当在企业微信中打开已关联的小程序,发现调用wx.qy.getEnterpriseUserInfo的接口是报错,如下图: 在调用wx.qy.getEnterpriseUserInfo之前,我是有先调wx ...
- [微信小程序]单选框以及多选框实例代码附讲解
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. 正文: 效果图 <radio-group class="radio-group" b ...
- 微信小程序实现即时通信聊天功能的实例代码
项目背景:小程序中实现实时聊天功能 一.服务器域名配置 配置流程 配置参考URL:https://developers.weixin.qq.com/miniprogram/dev/api/api-ne ...
- 使用腾讯官方的tbs调试微信中网页和小程序内容
注意: 仅支持android 1.下载TBS,如果官方点击下载不下来,使用迅雷下载.我当时是点击没有反应. 腾讯浏览服务-调试工具 2.安装 TBS 3.手机打开USB调试 4.打开TBS 检测环境, ...
- 微信小程序实现 短视频无限播放效果(类似快手小程序,抖音app的短视频滑动)
实现原理 利用小程序内置组件 swiper+video 来制定逻辑的方向 实现方式 设定swiepr-item数量为4,也就是在swiper里面同时展示4个video,避免过多导致页面卡顿例: (假设 ...
- 微信小程序和抖音小程序的区别?如何选择?
随着5G的到来,电商向多元化新型电商的转型也已成时代必然.2020年,当我们的Vlog.自媒体行业风生水起时,依托第三方的电商平台销售模式已经逐渐难以满足新型电商的应用场景,例如微信的私域流量.抖音对 ...
- 17_微信小程序之抖音微视无限滑动视频列表自定义组件编写
微信小程序之抖音微视无限滑动视频列表自定义组件编写 一.先上效果图 看到上面,你可能首先会想到,使用swiper然后将swiper的circular设置为true,那么,想象一下,假如视频很多的情况下 ...
- 微信小程序——仿抖音短视频切换效果
一直以为抖音短视频切换假如用小程序做的话应该是比较简单的,直接用swiper实现就好,但在实际写的过程中才发现没那么简单,要控制的逻辑还是挺多的. 还是先看效果 体验路径 自定义组件系列>> ...
- 微信小程序仿抖音视频
微信小程序仿抖音视频 使用轮播图实现视频滑动效果. wxml 部分 <view class="video-contain"><!-- 自定义头部 -->&l ...
- 从微信小程序到抖音小程序:转换指南
抖音小程序是一种新兴的小程序平台,与微信小程序类似,都是基于小程序框架的开发,不过两者的开发环境和API有所不同.如果你已经开发了一款微信小程序,想要将其转换为抖音小程序,可以按照以下步骤进行: 1. ...
最新文章
- SQLite3动态创建表
- xshell上vim小键盘无法使用的解决方法
- pytorch慢到无法安装,该怎么办?
- 7-4 求链式线性表的倒数第K项(最佳解法)(List容器)
- Linux篇 | 用户、组和权限(一)
- 微课|中学生可以这样学Python(8.4节):递归算法例题讲解3
- 简单的python案例_实现的简单python例子
- 9个JQuery和5个JavaScript经典面试题
- 每日一句20200103
- MATLAB学习 之 创建向量
- 计算机it dt ct基础知识,ot是什么意思(什么是CT,IT,DT,OT)
- Java正则表达式【详解】
- hp服务器虚拟网卡,HP服务器升级网卡固件、驱动来解决网卡bug的操作办法
- 计算机专业学习自然辩证法,深度学习 自然辩证法
- 老广人为粤语---广州话写篇文章
- 没有良好数学基础,应该怎样学习人工智能?
- 在Windows上使用Ubuntu共享的打印机
- 【NLP】jieba分词
- 这可能是你近 2 年发论文最好机会!
- sql函数能判断字段是否包含英文
热门文章
- Java编译运行命令
- 二调建设用地地类代码_二调地类和三调地类的对比
- axios封装接口步骤详解
- python实现pdf到excel的自动批量转换(附 完整代码)
- SQL数据导入mongodb
- java青鸟影院项目_影院在线售票云平台(仿猫眼电影,附SpringBoot项目源码) 系统功能实现...
- 漫画算法python版下载_漫画算法:小灰的算法之旅 PDF 全格式完整版
- [Matlab]利用Simulink进行模型设计和代码自动生成
- FreeTextBox使用
- ardupilot在Linux上设置SITL(FlightGear)