uniapp如何实现刷抖音小程序

本篇内容介绍了“uniapp如何实现刷抖音小程序”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！

去掉小程序顶部栏

• 为了让小视频刷起来更有感觉，肯定是需要弄个全屏才行的。

• 在 uniapp 项目里面的 pages.json 文件中修改当前页面路径的 navigationStyle

{"path":"pages/searchvideo/searchvideo","style":{"navigationBarTitleText":"小视频","enablePullDownRefresh":false,"navigationStyle":"custom"}}

顶部栏可以根据自己的需求自定义，我这里放了一个类似于抖音的 tab栏。

滚动小视频

在uniapp和原生的微信小程序里面都有 swiper 标签用于做滚动或轮播效果的组件，所以我们可以直接利用这个组件做出我们想要的效果。

组件

<swiperclass="card-swiper":circular="true"vertical="true":autoplay="true"duration="500"interval="5000"@change="cardSwiper"><swiper-itemv-for="(item,index)inswiperList":key="index":class="cardCur==index?'cur':''"><viewclass="swiper-itemimage-banner"><video:id="`video-${item.id}`":src="item.mp4"loop></video></view></swiper-item></swiper>

• 通过设置 autoplay 元素，可以让页面打开时，不会自动播放视频。

• 如果需要设置自动播放视频，需要动态配置 duration 的值，需要等于当前视频的播放时长。

• 循环 swiperList 的数据，方便我们操作当前视频。

数据

cardCur:0,swiperList:[{id:0,mp4:'vcdnb.huoying666/new_video/2023/0725/b94a235358c31668dc99e7cff9fe5e9c/v1080/b94a235351_6921661_fhd.mp4'},{id:1,mp4:'vcdnb.huoying666/new_video/2023/1211/9d0b01c88bd05721f9de88122de72db1/v1080/9d0b01c881_5872976_fhd.mp4'},{id:2,mp4:'vcdnb.huoying666/new_video/2023/1109/6f5610c304083ca59141c8f70aca6396/v720/6f5610c301_6578243_hd.mp4'}]

• 在 data 中定义 swiperList 数据内容，当然你也可以做成接口形式动态添加进去。

• 同时设置 cardCur 的默认值，用于配置视频滚动下标。

样式

.card-swiper{height:100vh!important;}.card-swiperswiper-item{width:750rpx!important;left:0rpx;box-sizing:border-box;overflow:initial;}.card-swiperswiper-item.swiper-item{width:100%;display:block;height:100vh;border-radius:0rpx;transform:scale(1);transition:all0.2sease-in0s;overflow:hidden;}.card-swiperswiper-item.cur.swiper-item{transform:none;transition:all0.2sease-in0s;}.card-swiperswiper-item.swiper-item-png{margin-top:-50vh;width:100%;display:block;border-radius:0rpx;transform:translate(1040rpx,20rpx)scale(0.5,0.5);transition:all0.6sease0s;}.card-swiperswiper-item.cur.swiper-item-png{margin-top:-100vh;width:900rpx;transform:translate(-80rpx,0rpx)scale(1,1);transition:all0.6sease0s;}.image-banner{display:flex;align-items:center;justify-content:center;}.image-bannerimage{width:100%;}

事件

cardSwiper(e){this.cardCur=e.detail.currentfor(leti=0;i<this.swiperList.length;i++){constvideoContext=uni.createVideoContext(`video-${this.swiperList[i]['id']}`,this)if(i===this.cardCur){videoContext.play()}else{videoContext.stop()}}}

• 在 methods 中定义 swiper 改变时的方法，用于控制视频的暂停和播放。

代码片段

代码片段里面的内容是直接引用的uniapp云发布的链接，如果想了解这一块的内容，可以单独开篇文章写一下的。

<divid="app"><iframesrc="static-54d8ac48-ba3d-4f0d-8a0b-029cbc34a4b3.bspapp/#/"width="400"height="800"></iframe></div>

{"success":false,"error":{"code":"InvalidSpace.Deleted","message":"The space is already deleted."},"data":null}

“uniapp如何实现刷抖音小程序”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注主机评测网网站，小编将为大家输出更多高质量的实用文章！

上一篇：ElementUI怎么对table的指定列进行合算

下一篇：dockerpose?up?-d遇到的问题如何解决

---