微信小程序框架Wepy实现列表video播放/自定义播放控件

template

省略了repeat那一层遍历，item是repeat得到的

tips:注意，play,showpause字段开始阶段并不存在，request之后遍历数组后添加这个字段，play，showpause全部设置false，showpause字段主要是用来标示视频是否暂停显示暂停图标。

而playurl默认不存在，遍历数组后如果用户点击播放，才把原本的vedio_url加上，之后脏检查更新数组，即可达到需求。

script

methods = {
            //暂停后再次点击播放
            playvedio(id) {
                let arr = this.list ;
                for (let i = 0; i < arr.length; i++) {
                    const ad = arr[i];
                    if(id == arr[i].id) {
                        ad.showpause = false;
                        let vc = wx.createVideoContext(String(id));
                        vc.play();
                    } else {
                        ad.showpause = true;
                        if(ad.playurl) {
                            wx.createVideoContext(String(arr[i].id)).pause();
                        }
                    }
                }
            },
            //暂停视频
            pausevedio(id){
                let arr = this.list ;
                for (let i = 0; i < arr.length; i++) {
                    const ad = arr[i];
                    if(id == arr[i].id) {
                        ad.showpause = true;
                        wx.createVideoContext(String(id)).pause();
                    }
                    this.$apply();
                }
            },
            //播放列表视频
            vedioplay(id) {
                let arr = this.list ;
                for (let i = 0; i < arr.length; i++) {
                    const ad = arr[i];
                    if(id == arr[i].id) {
                        ad.play = true;
                        ad.showpause = false;
                        arr[i].playurl = ad.video_url;
                        let vc = wepy.createVideoContext(String(id));
                        vc.play();
                    } else {
                        // ad.play = false;
                        ad.showpause = true;
                        if(ad.playurl) {
                            wx.createVideoContext(String(arr[i].id)).pause();
                        }
                    }
                    this.$apply();
                }
                // console.log(e.offsetTop);
                // this.$emit('scrool-top', e.offsetTop);
            }
        };

原创文章，转载请标示出处

前端wx交流群（群内有超级大佬）：