【视频刷刷刷】五分钟带你用uniapp做一个刷抖音的小程序
2023-02-18 16:32:26 时间
前言
最近闲来无事,在自己的小程序里面集成了一个小视频的接口,但是由于小程序对于播放视频的限制,只能用来做一个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云发布的链接,如果想了解这一块的内容,可以单独开篇文章写一下的。
写完了就得总结一下
这个功能对于小程序来说做起来不算太复杂,也是由于微信的限制,不能做出太复杂的刷视频的功能。大家可以根据自己的需求去修改这一块的代码
相关文章
- 【Android】开发Android应用时对于Handler消息传递与缓存问题深入运用and理解
- 在vmware中安装Android
- 超好用iOS管软件iMazing 2.16.6官网下载及2023新增功能
- Android 开场动画
- Android 主题theme说明 摘记
- Android开发 去掉标题栏方法 摘记
- vue中全局引入bootstrap.css
- 微搭低代码xChatGPT,五步搭建AI聊天机器人小程序
- 微信开放平台之第三方平台开发,模板小程序如何提交?
- 尝试Capacitor(Vue+Android)混合开发
- 小程序|炎炎夏日、清爽一夏、头像大换装
- Mac下安装NDK(android开发)
- textview设置字体大小-Android应用开发之TextView设置个别字体样式
- java小程序微信支付与提现
- iphone没有sim卡能用吗-升级ios15无sim卡怎么办
- MacDroid for mac(安卓设备文件传输助手) v1.6.1中文版
- 使用JQuery和bootstrap-select实现世界城市的三级联动(中英互译)
- AnyMP4 iOS Cleaner for mac(IOS文件清理工具)v1.0.16激活版
- 药物互助小程序的120个小时
- Android平台GB28181设备接入端如何实时更新经纬度实现国标平台侧电子地图位置标注