![0~7XWVGA2)RW]QKJ0BC~(%B.png](https://ucc.alicdn.com/pic/developer-ecology/a6609706a1f044608863defaac6a1acb.png?x-oss-process=image/resize,w_1400/format,webp "0~7XWVGA2)RW]QKJ0BC~(%B.png")
前言
最近闲来无事，在自己的小程序里面集成了一个小视频的接口，但是由于小程序对于播放视频的限制，只能用来做一个demo刷视频了，没办法上线体验。
小程序播放视频限制最多10个，超出可能就崩了。
我也有想过用js去追加和删减，但是还是有点麻烦了，等有空了再把想法化为现实吧。
演示一下看看
![F1M[(N2$%4[(@E`JAF3(]MV.png](https://ucc.alicdn.com/pic/developer-ecology/1d6f7cc05bec4f1896aa7dcf50db65f0.png?x-oss-process=image/resize,w_1400/format,webp "F1M[(N2$%4[(@E`JAF3(]MV.png")
去掉小程序顶部栏
- 为了让小视频刷起来更有感觉，肯定是需要弄个全屏才行的。
- 在
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云发布的链接，如果想了解这一块的内容，可以单独开篇文章写一下的。
写完了就得总结一下
这个功能对于小程序来说做起来不算太复杂，也是由于微信的限制，不能做出太复杂的刷视频的功能。大家可以根据自己的需求去修改这一块的代码，也可以加上点赞、收藏、分享等。
大家也可以关注公众号猿来是前端菜单栏里面有体验的小程序哦。
