uniapp五分钟实现刷抖音小程序教程示例
前言
最近闲来无事,在自己的小程序里面集成了一个小视频的接口,但是由于小程序对于播放视频的限制,只能用来做一个demo刷视频了,没办法上线体验。
小程序播放视频限制最多10个,超出可能就崩了。
我也有想过用js去追加和删减,但是还是有点麻烦了,等有空了再把想法化为现实吧。
演示一下看看
去掉小程序顶部栏
- 为了让小视频刷起来更有感觉,肯定是需要弄个全屏才行的。
- 在
uniapp
项目里面的pages.json
文件中修改当前页面路径的navigationStyle
{ "path": "pages/searchvideo/searchvideo", "style": { "navigationBarTitleText": "小视频", "enablePullDownRefresh": false, "navigationStyle": "custom" } }
顶部栏可以根据自己的需求自定义,我这里放了一个类似于抖音的 tab栏
。
滚动小视频
在uniapp
和原生的微信小程序
里面都有 swiper
标签用于做滚动或轮播效果的组件,所以我们可以直接利用这个组件做出我们想要的效果。
组件
<swiper class="card-swiper" :circular="true" vertical="true" :autoplay="true" duration="500" interval="5000" @change="cardSwiper"> <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''"> <view class="swiper-item image-banner"> <video :id="`video-${item.id}`" :src="item.mp4" loop style="height: 100vh;width: 100vw;"></video> </view> </swiper-item> </swiper>
- 通过设置
autoplay
元素,可以让页面打开时,不会自动播放视频。 - 如果需要设置自动播放视频,需要动态配置
duration
的值,需要等于当前视频的播放时长。 - 循环
swiperList
的数据,方便我们操作当前视频。
数据
cardCur: 0, swiperList: [{ id: 0, mp4: 'http://vcdnb.huoying666.com/new_video/2022/0725/b94a235358c31668dc99e7cff9fe5e9c/v1080/b94a235351_6921661_fhd.mp4' }, { id: 1, mp4: 'http://vcdnb.huoying666.com/new_video/2020/1211/9d0b01c88bd05721f9de88122de72db1/v1080/9d0b01c881_5872976_fhd.mp4' }, { id: 2, mp4: 'http://vcdnb.huoying666.com/new_video/2021/1109/6f5610c304083ca59141c8f70aca6396/v720/6f5610c301_6578243_hd.mp4' }]
- 在
data
中定义swiperList
数据内容,当然你也可以做成接口形式动态添加进去。 - 同时设置
cardCur
的默认值,用于配置视频滚动下标。
样式
.card-swiper { height: 100vh !important; } .card-swiper swiper-item { width: 750rpx !important; left: 0rpx; box-sizing: border-box; overflow: initial; } .card-swiper swiper-item .swiper-item { width: 100%; display: block; height: 100vh; border-radius: 0rpx; transform: scale(1); transition: all 0.2s ease-in 0s; overflow: hidden; } .card-swiper swiper-item.cur .swiper-item { transform: none; transition: all 0.2s ease-in 0s; } .card-swiper swiper-item .swiper-item-png { margin-top: -50vh; width: 100%; display: block; border-radius: 0rpx; transform: translate(1040rpx, 20rpx) scale(0.5, 0.5); transition: all 0.6s ease 0s; } .card-swiper swiper-item.cur .swiper-item-png { margin-top: -100vh; width: 900rpx; transform: translate(-80rpx, 0rpx) scale(1, 1); transition: all 0.6s ease 0s; } .image-banner { display: flex; align-items: center; justify-content: center; } .image-banner image { width: 100%; }
事件
cardSwiper(e) { this.cardCur = e.detail.current for (let i = 0; i < this.swiperList.length; i++) { const videoContext = uni.createVideoContext(`video-${this.swiperList[i]['id']}`, this) if (i === this.cardCur) { videoContext.play() } else { videoContext.stop() } } }
- 在
methods
中定义swiper
改变时的方法,用于控制视频的暂停和播放。
由于uniapp
是可以直接编译成 H5
的,所以我们就直接在掘金代码片段
中看一下效果吧。
代码片段
代码片段里面的内容是直接引用的uniapp云发布的链接,如果想了解这一块的内容,可以单独开篇文章写一下的。
<div id="app"> <iframe src="https://static-54d8ac48-ba3d-4f0d-8a0b-029cbc34a4b3.bspapp.com/#/" width="400" height="800"></iframe> </div>
{"success":false,"error":{"code":"InvalidSpace.Deleted","message":"The space is already deleted."},"data":null}
写完了就得总结一下
这个功能对于小程序来说做起来不算太复杂,也是由于微信的限制,不能做出太复杂的刷视频的功能。大家可以根据自己的需求去修改这一块的代码
以上就是uniapp五分钟实现刷抖音小程序教程示例的详细内容,更多关于uniapp刷抖音小程序的资料请关注猪先飞其它相关文章!
原文出处:https://juejin.cn/post/7140232886413852685
相关文章
- 这篇文章主要介绍了微信小程序 页面传值详解的相关资料,需要的朋友可以参考下...2017-03-13
- 本文实例讲述了PHP常用的小程序代码段。分享给大家供大家参考,具体如下:1.计算两个时间的相差几天$startdate=strtotime("2009-12-09");$enddate=strtotime("2009-12-05");上面的php时间日期函数strtotime已经把字符串...2015-11-24
- 这篇文章主要介绍了uniapp微信小程序:key失效的解决方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-01-20
- 这篇文章主要介绍了Python爬取微信小程序通用方法代码实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-09-29
- 这篇文章主要介绍了微信小程序 二维码生成工具 weapp-qrcode详解,教大家如何在项目中引入weapp-qrcode.js文件,通过实例代码给大家介绍的非常详细,需要的朋友可以参考下...2021-10-23
- 本文主要介绍了手把手教你uniapp和小程序分包,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-09-02
- 这篇文章主要介绍了微信小程序手势操作之单触摸点与多触摸点的相关资料,需要的朋友可以参考下...2017-03-13
- 这篇文章主要介绍了微信小程序 网络请求(GET请求)详解的相关资料,需要的朋友可以参考下...2016-11-22
- 这篇文章主要为大家详细介绍了微信小程序自定义tabbar组件,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-03-14
微信小程序 wx.request(object) API详解及实例代码
这篇文章主要介绍了微信小程序 wx.request(object) API详解及实例代码的相关资料,需要的朋友可以参考下...2016-10-02- 这篇文章主要介绍了微信小程序多列表渲染数据开关互不影响的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-06-06
- 这篇文章主要给大家介绍了关于微信小程序如何获取图片宽度与高度的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-10
- 前段时间发布了一个微信小程序的简单登录,但遇到一个问题,怎么确保用户每个页面都已经登陆了呢,这篇文章主要给大家介绍了关于微信小程序如何保证每个页面都已经登陆的相关资料,需要的朋友可以参考下...2021-11-05
- 这篇文章主要为大家详细介绍了微信小程序实现点击导航条切换页面,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-11-19
- 这篇文章主要介绍了微信小程序(应用号)开发新闻客户端实例的相关资料,需要的朋友可以参考下...2016-10-25
- 这篇文章主要为大家详细介绍了微信小程序实现点赞业务,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-02-10
- 这篇文章主要为大家详细介绍了微信小程序支付C#后端源码,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
- 这篇文章主要介绍了uniapp,微信小程序中使用 MQTT的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
- 这篇文章主要为大家详细介绍了微信小程序实现canvas分享朋友圈海报,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-21
- 这篇文章主要介绍了微信小程序 页面跳转传递值几种方法详解的相关资料,需要的朋友可以参考下...2017-01-16