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().screenWidthlet screenHeight = uni.getSystemInfoSync().screenHeightthis.hw = {width: screenWidth,height: screenHeight}},onShow() {},methods: {beFondOfClick(it) {it.beFondOf = !it.beFondOf}}}

css代码

<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>

感觉性能不是很好，有需要可以借鉴，大佬有更好的办法也可以指导指导