uniapp小白，模仿抖音首页的刷视频功能，
uniapp插件市场有很多，但是爱好摸鱼的我，也想试一试其他方法
上面是效果图（样式比较潦草，没有仔细写）
一开始想得比较简单，上下滑动的效果用uni内置的swiper组件即可实现，然后就开始干了如下
<template>
<view>
<swiper :vertical="true" class="box">
<swiper-item v-for="it in swiperList" :key="it.id" class="spitem">
<video :src="it.mp4" autoplay/>
</swiper-item>
</swiper>
</view>
</template>h5端浏览器上看，感觉自己以及结束了实现了刷视频的简单效果，
结果真机调试出现了匪夷所思的问题（视频一直卡在屏幕中间，并没有跟着swiper-item去滑动）
也查了很多文，才知道video和map等控件属于原生控件，渲染时会高于前端组件（z-index也无济于事），webview以及cover-view等方法也尝试了一些,但是不太好使。
最后通过nvue才解决自己的问题，
关于nvew和vue的解释可以参考https://blog.csdn.net/weixin_53853031/article/details/125416839
简单说就是nvue 走 weex 渲染，uni-app 集成了 weex 的 SDK，也就实现了 App 端的原生渲染能力。将前端组件当原生组件去渲染，解决了前端控件优先级低于原生控件的问题
html代码
<template>
<view>
<swiper :vertical="true" class="box" :style="`height: ${hw.height}px;;`">
<swiper-item v-for="it in swiperList" :key="it.id" class="spitem">
<view class="bg-video" :style="`width:${hw.width}px;height:${hw.height}px`">
<video class="vdplayer" :id="'vdplayer' + it.id" :ref="'vdplayer' + it.id" :src="it.mp4"
:controls="false" :duration="1000" :loop="true" :show-center-play-btn="true"
object-fit="contain" autoplay :style="`width:${hw.width}px;height:${hw.height}px;`" />
<view class="right_menu" :style="`top:${hw.height/2}px`">
<image :src="it.imgSrc" class="user_hp" />
<view @click="beFondOfClick(it)" class="imgBox">
<image class="spitemImage" src="@/static/image/d1.png" v-if="!it.beFondOf" />
<image class="spitemImage" src="@/static/image/d2.png" v-if="it.beFondOf" />
<view><text class="rtext">点赞</text></view>
</view>
<view class="imgBox">
<image class="spitemImage" src="@/static/image/pl.png" />
<view><text class="rtext">评论</text></view>
</view>
<view class="imgBox">
<image class="spitemImage" src="@/static/image/zf.png" />
<view><text class="rtext">转发</text></view>
</view>
</view>
<view class="bottom_info" :style="`bottom:${hw.height/6};width:${hw.width/2}`">
<view><text class="user_name">{{it.user_name}}</text></view>
<view><text class="video_introduce">{{it.video_introduce}}</text></view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</template>js代码
因为nvue的渲染问题，百分比和vh、vw等部分css不会生效，所以页面加载的时候获取了屏幕宽高，去计算宽高布局
export default {
data() {
return {
hw: {
width: 0,
height: 0
},
swiperList: [{
id: 1,
mp4: 'https://cdn.uviewui.com/uview/resources/video.mp4',
imgSrc:'../../static/image/logo.png',
user_name:'uni-app',
video_introduce:'一段视频简介，一段视频简介，一段视频简介，一段视频简介，一段视频简介',
beFondOf: false
}, {
id: 2,
mp4: 'http://vcdnb.huoying666.com/new_video/2022/0725/b94a235358c31668dc99e7cff9fe5e9c/v1080/b94a235351_6921661_fhd.mp4',
imgSrc:'../../static/image/qsLoc.png',
user_name:'骑手小杨',
video_introduce:'一段视频简介，一段视频简介',
beFondOf: false
}, {
id: 3,
mp4: 'http://vcdnb.huoying666.com/new_video/2020/1211/9d0b01c88bd05721f9de88122de72db1/v1080/9d0b01c881_5872976_fhd.mp4',
imgSrc:'../../static/image/wdLoc.png',
user_name:'无敌风火轮',
video_introduce:'一段视频简介，一段视频简介，一段视频简介，一段视频简介',
beFondOf: false
}, {
id: 4,
mp4: 'http://vcdnb.huoying666.com/new_video/2021/1109/6f5610c304083ca59141c8f70aca6396/v720/6f5610c301_6578243_hd.mp4',
imgSrc:'../../static/tabbar/shopping_trolley2.png',
user_name:'购物狂魔',
video_introduce:'一段视频简介，一段视频简介，一段视频简介',
beFondOf: false
}]
}
},
onLoad() {
let screenWidth = uni.getSystemInfoSync().screenWidth
let screenHeight = uni.getSystemInfoSync().screenHeight
this.hw = {
width: screenWidth,
height: screenHeight
}
},
onShow() {
},
methods: {
beFondOfClick(it) {
it.beFondOf = !it.beFondOf
}
}
}css代码文章来源：https://www.toymoban.com/news/detail-427033.html
<style lang="scss" scoped>
.box {
background-color: #333;
text-align: center;
}
.bg-video {
background-color: #333;
}
.right_menu {
position: absolute;
right: 30rpx;
z-index: 990;
.user_hp {
margin-bottom: 30rpx;
width: 50px;
height: 50px;
border: 2px solid #ffffff;
background-color: #fff;
border-radius: 50%;
}
.imgBox {
display: flex;
align-items: center;
.spitemImage {
width: 60rpx;
height: 60rpx;
}
.rtext {
text-align: center;
color: #ffffff;
font-size: 24rpx;
margin-top: 10rpx;
margin-bottom: 30rpx;
}
}
}
.bottom_info{
position: absolute;
left: 30rpx;
z-index: 990;
.user_name{
font-size: 40rpx;
font-weight: bold;
color:#ffffff;
margin-bottom: 20rpx;
}
.video_introduce{
font-size: 28rpx;
color:#ffffff;
}
}
</style>
感觉性能不是很好，有需要可以借鉴，大佬有更好的办法也可以指导指导文章来源地址https://www.toymoban.com/news/detail-427033.html
到了这里，关于学习uniapp 在App端模仿抖音刷视频效果的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
