标签：play obj score app direction current item weex vue2.0
前端小白一枚，通过接触一段时间的 weex，谈下自己的想法和其中遇到的问题
现在先来说下碰到的问题：
在一个页面中是 video 列表，要根据滚动来控制该哪个视频来播放
tab 页面里面有不同的数据列表，各个 tab 页面的刷新和加载状态无法重置问题
....
遇到的两个大的问题，里面还有诸多的小问题
献上解决办法：
依据 weex 里面 video 标签和 weex 的 appear 和 disappear 通用事件来解决的，里面的具体内容，大家可以看这里:
http://weex.apache.org/refere...
贴出代码：
使用到 osc-video.vue 的文件
<div v-for="(item,index) in videos" class="videos-wrapper">
<osc-video :item="item" @score_change="score_change"></osc-video>
</div>
osc-video.vue
<video class="video" :src="item.type_data.video_url"
:playStatus="playStatus"
：autoPlay="autoPlay"
@click="show_video_time=!show_video_time">
</video>
<div class="control-play control-play-first" @appear="onappear" @disappear="ondisappear"></div>
<div class="control-play control-play-second" @appear="onappear" @disappear="ondisappear"></div>
<div class="control-play control-play-third" @appear="onappear" @disappear="ondisappear"></div>
<div class="control-play control-play-four" @appear="onappear" @disappear="ondisappear"></div>
<div class="control-play control-play-five" @appear="onappear" @disappear="ondisappear"></div>
设置得分数
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<this.score_item.length;i++){
let v=this.score_item[i]
if(v.score > 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，现在项目还在进行中，后续遇到的问题和解决方案也会加进来。
慢慢进行，爬坑之旅，
《--希望大家多多指点--》
标签：play,obj,score,app,direction,current,item,weex,vue2.0 来源： https://www.cnblogs.com/homehtml/p/12496428.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。