基于vue2.0+weex开发app遇到的问题（爬坑之旅）

时间：2023-04-02 15:27:23 HTML

一个前端小白，通过接触weex一段时间，说说自己的想法和在里面遇到的问题，现先来说说遇到的问题：一个页面中有一个视频列表，需要根据滚动来控制播放哪个视频。标签页中有不同的数据列表，每个标签页的刷新和加载状态无法重置....遇到的两大问题，里面还有很多小问题，给出解决方案：基于weex中的video标签和weex中出现和消失的一般事件，具体内容可以看这里：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.directionthis.score+=20;this.notify_score_changed();},//根据出现和消失触发score_changenotify_score_changed:function(){this.$emit("score_change",this);},ondisappear(e){this.paly_direction=e.directionthis.score-=20this.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){letnIndex=this.score_item.indexOf(obj);console.log("scorechanged:"+obj.score)if(obj.score==0){if(nIndex>=0){this.score_item.splice(nIndex,1)}}if(nIndex<0){///TODO,scrollup/down///在没有滚动的情况下进入视频列表时，会认为play_direction是undefinedif(obj.paly_direction==undefined||obj.paly_direction=="up"){this.score_item.push(obj)}else{this.score_item.unshift(obj)}}console.log("scorearr:"+nIndex+"length:"+this.score_item.length)},controlPlay(){letscore_high=0;letmight_play=nullfor(leti=0;iscore_high){score_high=v.scoremight_play=v}}//console.log("当前分数："+score_high)if(this.current_play==might_play){return}if(this.current_play!=null){this.current_play.$emit('play','pause')}this.current_play=might_playthis.current_play.$emit('play','play')},score_change(e){this.createscorelist(e)this.controlPlay();}}至此视频列表可以滚动播放了。漫欢看的兴高采烈的时候，又发现了一个问题。数据刚进入页面后，视频不会自动播放，需要上拉或下拉后才能播放视频。后来发现无法设置播放状态的值是因为数据没有加载成功。找到解决方法：进入页面后，判断播放状态，然后设置自动播放在视频构建中添加属性autoPlay：autoPlay并在监听事件play中添加mounted(){this.$on("play",(e)=>{this.playStatus=eif(e=="play"){this.autoPlay=play}else{this.autoPlay=pause}})}现在这个问题已经解决了，后面会补充第二个问题的解决方法。接触后的感想：一开始是想让三个终端保持一致，但是在后来的开发中遇到了很多坑。很难做一套三个终端都通用的模板，所以我放弃了web端，只专注于android和ios。项目还在进行中，以后遇到的问题和解决办法也会补充。慢慢来，爬坑的旅程，《--希望大家多多指点--》

上一篇：html+css知识点总结

下一篇：Week1--Introduction to HTML5

基于vue2.0+weex开发app遇到的问题（爬坑之旅）相关文章