uniapp app仿抖音视频video

借鉴了许多网上的案例，最终效果都不尽如人意，但是存在的bug都不在一处，最后结合几个版本的bug总结，出了一版从流畅度，bug方面最完美的版本。

用swiper的话在某些手机很卡，加载不顺畅，上下滑动也不流畅。还有许多video的音画不同步问题，多个视频音效同时播放问题等。最后采用的是uniapp的List元素，顺畅度是最好的，在其他音频问题上代码如下：

每次打开/关闭视频播放时：uni.createVideoContext(`video_${this.index}`, this).pause()/play() 根据视频id初始化视频播放/暂停

点击播放/暂停：

tapVideoHover(e) {

    var that = this

    var tapDbl = false

    this.tapIndex = this.tapIndex == 0 ? 1 : this.tapIndex + 1;

    if (this.tapIndex == 2) {

        this.end_time = new Date().getTime();

        if (this.end_time – this.start_time < 300) {

            this.dblClick = true

        }

        this.tapIndex = this.start_time = this.end_time = 0;

    } else if (this.tapIndex == 1) {

        tapDbl = true

        this.dblClick = false

        this.start_time = new Date().getTime();

        setTimeout(() => {

            this.tapIndex = this.start_time = this.end_time = 0;

        }, 200)

    }

    setTimeout(() => {

        if (!this.dblClick && tapDbl) {

            if (that.kebofang == 1) {

                that.kebofang = 0;

                uni.createVideoContext(`video_${this.index}`, this).pause()

            } else {

                that.kebofang = 1;

                uni.createVideoContext(`video_${this.index}`, this).play()

            }

        } else if (this.dblClick && tapDbl) {

            that.transShow = false;

            setTimeout(() => {

                if (that.tabIndex != 1 && that.videoList[that.index].isLike != 1) {

                    that.tapLove(that.index)

                }

                if (that.tabIndex != 1 && uni.getStorageSync( userToken )) {

                    that.modeClass = [ fade ];

                    that.transShow = !that.transShow;

                    setTimeout(() => {

                        that.transShow = false;

                    }, 800)

                }

            }, 100)

        }

    }, 300)

},