raise
raise
  • 发布:2019-08-24 16:11
  • 更新:2019-08-27 11:09
  • 阅读:2070

【报Bug】用nvue做了个仿抖音的app但是有时候启动会白屏幕,有时候不会。代码和安装包如下

分类:nvue

oss版本下载地址 https://jita-app.oss-cn-hangzhou.aliyuncs.com/download/oss.apk

普通版本下载地址 https://jita-app.oss-cn-hangzhou.aliyuncs.com/download/app.apk

源代码不愿意开源,希望官方联系我。

2019-08-24 16:11 负责人:无 分享
已邀请:
DCloud_uniAD_HDX

DCloud_uniAD_HDX

要复用 Video 组件

参考代码

<template>  
    <view class="page">  
        <swiper class="swiper" :circular="circular" :vertical="true" @change="onSwiperChange">  
            <swiper-item v-for="item in videoList" :key="item.id">  
                <video class="video" :id="item.id" :ref="item.id" :src="item.src" :controls="false" :loop="true"  
                    :show-center-play-btn="false"></video>  
            </swiper-item>  
        </swiper>  
    </view>  
</template>  
<script>  
    const videoData = [{  
            src: 'https://img-cdn-qiniu.dcloud.net.cn/hello-nvue-swiper-vertical-01.mp4'  
        },  
        {  
            src: 'https://img-cdn-qiniu.dcloud.net.cn/hello-nvue-swiper-vertical-02.mp4'  
        },  
        {  
            src: 'https://img-cdn-qiniu.dcloud.net.cn/hello-nvue-swiper-vertical-03.mp4'  
        },  
        {  
            src: 'https://img-cdn-qiniu.dcloud.net.cn/hello-nvue-swiper-vertical-01.mp4'  
        },  
        {  
            src: 'https://img-cdn-qiniu.dcloud.net.cn/hello-nvue-swiper-vertical-02.mp4'  
        },  
        {  
            src: 'https://img-cdn-qiniu.dcloud.net.cn/hello-nvue-swiper-vertical-03.mp4'  
        }  
    ];  
  
    export default {  
        data() {  
            return {  
                circular: true,  
                videoList: [{  
                        id: "video0",  
                        src: "",  
                        img: ""  
                    },  
                    {  
                        id: "video1",  
                        src: "",  
                        img: ""  
                    },  
                    {  
                        id: "video2",  
                        src: "",  
                        img: ""  
                    }  
                ],  
                videoDataList: []  
            }  
        },  
        onLoad(e) {},  
        onReady() {  
            this.init();  
            this.getData();  
        },  
        methods: {  
            init() {  
                this._videoIndex = 0;  
                this._videoContextList = [];  
                for (var i = 0; i < this.videoList.length; i++) {  
                    //this._videoContextList.push(uni.createVideoContext('video' + i, this));  
                    this._videoContextList.push(this.$refs['video' + i][0]);  
                }  
                this._videoDataIndex = 0;  
            },  
            getData(e) {  
                this.videoDataList = videoData;  
                this.updateVideo(true);  
            },  
            onSwiperChange(e) {  
                let currentIndex = e.detail.current;  
                if (currentIndex === this._videoIndex) {  
                    return;  
                }  
  
                let isNext = false;  
                if (currentIndex === 0 && this._videoIndex === this.videoList.length - 1) {  
                    isNext = true;  
                } else if (currentIndex === this.videoList.length - 1 && this._videoIndex === 0) {  
                    isNext = false;  
                } else if (currentIndex > this._videoIndex) {  
                    isNext = true;  
                }  
  
                if (isNext) {  
                    this._videoDataIndex++;  
                } else {  
                    this._videoDataIndex--;  
                }  
  
                if (this._videoDataIndex < 0) {  
                    this._videoDataIndex = this.videoDataList.length - 1;  
                } else if (this._videoDataIndex >= this.videoDataList.length) {  
                    this._videoDataIndex = 0;  
                }  
  
                this.circular = (this._videoDataIndex != 0);  
  
                if (this._videoIndex >= 0) {  
                    this._videoContextList[this._videoIndex].pause();  
                    this._videoContextList[this._videoIndex].seek(0);  
                }  
  
                this._videoIndex = currentIndex;  
  
                setTimeout(() => {  
                    this.updateVideo(isNext);  
                }, 200);  
            },  
            getNextIndex(isNext) {  
                let index = this._videoIndex + (isNext ? 1 : -1);  
                if (index < 0) {  
                    return this.videoList.length - 1;  
                } else if (index >= this.videoList.length) {  
                    return 0;  
                }  
                return index;  
            },  
            getNextDataIndex(isNext) {  
                let index = this._videoDataIndex + (isNext ? 1 : -1);  
                if (index < 0) {  
                    return this.videoDataList.length - 1;  
                } else if (index >= this.videoDataList.length) {  
                    return 0;  
                }  
                return index;  
            },  
            updateVideo(isNext) {  
                this.$set(this.videoList[this._videoIndex], 'src', this.videoDataList[this._videoDataIndex].src);  
                this.$set(this.videoList[this.getNextIndex(isNext)], 'src', this.videoDataList[this.getNextDataIndex(isNext)].src);  
                setTimeout(() => {  
                    this._videoContextList[this._videoIndex].play();  
                }, 200);  
                console.log("v:" + this._videoIndex + " d:" + this._videoDataIndex + "; next v:" + this.getNextIndex(  
                    isNext) + " next d:" + this.getNextDataIndex(isNext));  
            }  
        }  
    }  
</script>  
  
<style>  
    .page {  
        flex: 1;  
        width: 750upx;  
    }  
  
    .swiper {  
        flex: 1;  
        background-color: #007AFF;  
    }  
  
    .swiper-item {  
        flex: 1;  
    }  
  
    .video {  
        flex: 1;  
    }  
</style>  

  • raise (作者)

    你这是vue还是nvue?


    2019-08-26 18:26

  • raise (作者)

    设计仍然不合理,滑动到第四个到时候先显示第一个第视频 然后才显示第四个视频。会闪一下,有时候就是这样的一闪我们就没办法跟客户交代


    2019-08-26 21:08

  • DCloud_uniAD_HDX

    回复 raise: 运行到什么平台,提供机型及系统信息


    2019-08-27 10:44

  • raise (作者)

    回复 DCloud_uniAD_HDX: 小米8 ps:我已经参考你的方案做了4个video组件复用的方案,完美绕过比较卡的手机,预加载的速度


    2019-08-27 20:26

raise

raise (作者)

源代码想上传但是,超过10m就上传不了希望官方联系我。qq 630033903

  • DCloud_heavensoft

    插件市场不是有吗,可以对比下


    2019-08-26 08:22

  • raise (作者)

    回复 DCloud_heavensoft: 那个一样卡,而且那边都放弃原生用css3了


    2019-08-26 14:17

  • raise (作者)

    回复 DCloud_heavensoft: 有时候启动就会变白屏。有时候又不会,这是什么问题。能否帮忙看下。应该不是写的代码问题。代码总不会出现不稳定的情况吧。


    2019-08-26 15:34

  • DCloud_uniAD_HDX

    回复 DCloud_uniAD_HDX: 回复 630033903@qq.com: 加你QQ了 验证信息 DCloud


    2019-08-26 17:28

该问题目前已经被锁定, 无法添加新回复