摘要：在組建中增加屬性以及在監聽事件中增加為現在這個問題已經解決完畢，后續會增加上第二個問題的解決方案。慢慢進行，爬坑之旅，希望大家多多指點

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

現在先來說下碰到的問題：

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

tab 頁面里面有不同的數據列表，各個 tab 頁面的刷新和加載狀態無法重置問題

....

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

獻上解決辦法：

依據 weex 里面 video 標簽和 weex 的 appear 和 disappear 通用事件來解決的，里面的具體內容，大家可以看這里:

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

貼出代碼：

使用到 osc-video.vue 的文件

         

             
         
     
        osc-video.vue
                    
            

            

            

            

            

            設置得分數
            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();                
            },
        //根據appear和disappear觸發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中監聽播放事件
        mounted(){
            this.$on("play",(e)=>{
                this.playStatus=e
                
            })
        }

在父組件中，先創建存放得分數的數組 score_item 和當前應當播放的視頻的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
                     /// 剛進入video列表沒有滾動時 會認為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();
            }                                                                                                                
}

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

在 video 組建中增加屬性 autoPlay：autoPlay以及在監聽事件 play 中增加為

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

現在這個問題已經解決完畢，后續會增加上第二個問題的解決方案。

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

慢慢進行，爬坑之旅，

《--希望大家多多指點--》