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

 更新时间:2020年04月11日 15:53:48   作者:给我盘他  
这篇文章主要介绍了微信小程序实现抖音播放效果的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

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

在这里插入图片描述

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

然后就开始啦

思路使用微信的 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}}" 这个起到的是控制加载要不会多个同时播放没刷到的也会播放 现在只会播放当前页面视频

总结

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

相关文章

  • 鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

    鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解

    这篇文章主要介绍了鼠标事件的screenY,pageY,clientY,layerY,offsetY属性详解,需要的朋友可以参考下
    2015-03-03
  • js中iframe调用父页面的方法

    js中iframe调用父页面的方法

    这篇文章主要介绍了js中iframe调用父页面的方法,可通过window.parent.方法()来实现,非常具有实用价值,需要的朋友可以参考下
    2014-10-10
  • JS中window.open全屏命令解析及使用示例

    JS中window.open全屏命令解析及使用示例

    window.open想必大家对它并不陌生吧,那么如何让它全屏就有些朋友不知道了,下面为大家介绍下其常用的命令及如何全屏
    2013-12-12
  • JS实现的简单表单验证功能示例

    JS实现的简单表单验证功能示例

    这篇文章主要介绍了JS实现的简单表单验证功能,涉及javascript针对表单提交内容的获取、判断、焦点设置等相关操作技巧,需要的朋友可以参考下
    2017-10-10
  • JavaScript两个变量交换值的实现方法

    JavaScript两个变量交换值的实现方法

    本文主要介绍了JavaScript两个变量交换值(不使用临时变量)的实现方法,具有很好的参考价值,下面跟着小编一起来看下吧
    2017-03-03
  • js写的方法实现上传图片之后查看大图

    js写的方法实现上传图片之后查看大图

    用js写了一个方法,然后在image的onmouseover事件中调用此方法,这样在鼠标悬浮在小图上面的时候,其大图就会自动的显示出来
    2014-03-03
  • 浅谈JavaScript工具链不完全指南

    浅谈JavaScript工具链不完全指南

    经过这么多年的发展,JavaScript 早已经不是当年那个不太起眼的脚本语言。如今的 JavaScript 可以说是风光无限,在 Web 前端、移动端、服务端甚至物联网设备上都大展身手,到处都有它的身影。
    2021-05-05
  • Javascript 圆角div的实现代码

    Javascript 圆角div的实现代码

    为什么要做圆角的div: 圆角div平滑美观,某些情况下有比较不错的效果。比如说要做一个报message的消息框,那么动态的生成一个圆角div则很有意义。而对html样式控制的css本身是不直接支持圆角div的。
    2009-10-10
  • 控制台报错:Cannot access 'xxx' before initialization解决方法

    控制台报错:Cannot access 'xxx' before initializatio

    这篇文章主要给大家介绍了关于控制台报错:Cannot access 'xxx' before initialization的解决方法,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-11-11
  • js实现简单商品筛选功能

    js实现简单商品筛选功能

    这篇文章主要为大家详细介绍了js实现商品筛选功能,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-02-02

最新评论