摘要：在組建中增加屬性以及在監(jiān)聽事件中增加為現(xiàn)在這個問題已經(jīng)解決完畢，后續(xù)會增加上第二個問題的解決方案。慢慢進(jìn)行，爬坑之旅，希望大家多多指點(diǎn)

前端小白一枚，通過接觸一段時間的 weex，談下自己的想法和其中遇到的問題

現(xiàn)在先來說下碰到的問題：

在一個頁面中是 video 列表，要根據(jù)滾動來控制該哪個視頻來播放

tab 頁面里面有不同的數(shù)據(jù)列表，各個 tab 頁面的刷新和加載狀態(tài)無法重置問題

....

遇到的兩個大的問題，里面還有諸多的小問題

獻(xiàn)上解決辦法：

依據(jù) weex 里面 video 標(biāo)簽和 weex 的 appear 和 disappear 通用事件來解決的，里面的具體內(nèi)容，大家可以看這里:

http://weex.apache.org/refere...

貼出代碼：

使用到 osc-video.vue 的文件

         

             
         
     
        osc-video.vue
                    
            

            

            

            

            

            設(shè)置得分?jǐn)?shù)
            js:data(){return {score: 0，autoPlay:autoPlay，paly_direction:null}}
                methods:{
            onappear(e){
                this.paly_direction=e.direction
                this.score += 20;
                this.notify_score_changed();                
            },
        //根據(jù)appear和disappear觸發(fā)score_change                                                                                                        
            notify_score_changed:function(){        
                this.$emit("score_change",this);
            },
            ondisappear(e){
                this.paly_direction=e.direction
                this.score -= 20
                this.notify_score_changed();
            }    
        }，
        在mounted中監(jiān)聽播放事件
        mounted(){
            this.$on("play",(e)=>{
                this.playStatus=e
                
            })
        }

在父組件中，先創(chuàng)建存放得分?jǐn)?shù)的數(shù)組 score_item 和當(dāng)前應(yīng)當(dāng)播放的視頻的current_play：

    data(){score_time:[],current_play:null},
methods:{
        createscorelist:function(obj){
                
                let nIndex = this.score_item.indexOf(obj) ;
                console.log("score changed: " + obj.score)                
                if(obj.score == 0)
                {
                    if(nIndex >= 0)
                    {
                       this.score_item.splice(nIndex,1)
                    }
                }
                if(nIndex< 0){
                     /// TODO,  scroll up /down
                     /// 剛進(jìn)入video列表沒有滾動時 會認(rèn)為play_direction是undefined
                         if(obj.paly_direction==undefined || obj.paly_direction=="up" )                    {
                             this.score_item.push(obj)
                         }else{
                             this.score_item.unshift(obj)
                         }
                }    
                console.log("score arr:" + nIndex + " length:" + this.score_item.length)        

            },
            controlPlay(){
                let score_high = 0;
                let  might_play = null
                  for(let i=0;i score_high){
                           score_high = v.score
                           might_play = v
                       }
                  }

                 // console.log("current score:" + score_high)
                  if(this.current_play == might_play){
                      return
                  }
                  if(this.current_play != null){
                      this.current_play.$emit("play", "pause")
                  }
                  this.current_play = might_play
                  this.current_play.$emit("play", "play")
            },
            score_change(e){
                this.createscorelist(e)
                this.controlPlay();
            }                                                                                                                
}

至此視頻列表可以滾動播放， 當(dāng)滿環(huán)欣喜的去看時 ，卻又發(fā)現(xiàn)了一個問題， 是在數(shù)據(jù)剛進(jìn)入頁面之后， 視頻不會自動的播放， 但是當(dāng)上拉或者下拉之后， 視頻才可以播放，
后來發(fā)現(xiàn)是因為數(shù)據(jù)還沒有加載成功，播放狀態(tài)的值無法去進(jìn)行設(shè)置，找到了解決方法：在進(jìn)入頁面之后，判斷一下播放的狀態(tài)，然后在設(shè)置自動播放。

在 video 組建中增加屬性 autoPlay：autoPlay以及在監(jiān)聽事件 play 中增加為

        mounted(){
            this.$on("play",(e)=>{
                this.playStatus=e
                if(e=="play"){
                    this.autoPlay=play
                }else{
                    this.autoPlay=pause
                }
            })
        },

現(xiàn)在這個問題已經(jīng)解決完畢，后續(xù)會增加上第二個問題的解決方案。

接觸之后的想法：開始本來想著做三端一致的，但是在后來開發(fā)中遇到不少的坑，很難做到一套模板，三端通用，就舍棄了 web 端 只專注 android 和 ios，現(xiàn)在項目還在進(jìn)行中，后續(xù)遇到的問題和解決方案也會加進(jìn)來。

慢慢進(jìn)行，爬坑之旅，

《--希望大家多多指點(diǎn)--》