学习uniapp 在App端模仿抖音刷视频效果

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

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

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