uniapp如何实现刷抖音小程序
本篇内容介绍了“uniapp如何实现刷抖音小程序”的有关知识，在实际案例的操作过程中，不少人都会遇到这样的困境，接下来就让小编带领大家学习一下如何处理这些情况吧！希望大家仔细阅读，能够学有所成！
去掉小程序顶部栏
为了让小视频刷起来更有感觉，肯定是需要弄个全屏才行的。
在
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 ></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云发布的链接，如果想了解这一块的内容，可以单独开篇文章写一下的。
<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如何实现刷抖音小程序”的内容就介绍到这里了，感谢大家的阅读。如果想了解更多行业相关的知识可以关注蜗牛博客网站，小编将为大家输出更多高质量的实用文章！
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：niceseo99@gmail.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
评论