资讯专栏INFORMATION COLUMN

基于vue2.0+weex开发app 之中遇到的问题(爬坑之旅)

weizx / 1979人阅读

摘要:在组建中增加属性以及在监听事件中增加为现在这个问题已经解决完毕,后续会增加上第二个问题的解决方案。慢慢进行,爬坑之旅,希望大家多多指点

前端小白一枚,通过接触一段时间的 weex,谈下自己的想法和其中遇到的问题

现在先来说下碰到的问题:

在一个页面中是 video 列表,要根据滚动来控制该哪个视频来播放

tab 页面里面有不同的数据列表,各个 tab 页面的刷新和加载状态无法重置问题

....

遇到的两个大的问题,里面还有诸多的小问题

献上解决办法:

依据 weex 里面 video 标签和 weex 的 appeardisappear 通用事件来解决的,里面的具体内容,大家可以看这里:

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,现在项目还在进行中,后续遇到的问题和解决方案也会加进来。

慢慢进行,爬坑之旅,

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

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/50774.html

相关文章

  • 基于vue2.0+weex开发app 之中遇到问题爬坑之旅

    摘要:在组建中增加属性以及在监听事件中增加为现在这个问题已经解决完毕,后续会增加上第二个问题的解决方案。慢慢进行,爬坑之旅,希望大家多多指点 前端小白一枚,通过接触一段时间的 weex,谈下自己的想法和其中遇到的问题 现在先来说下碰到的问题: 在一个页面中是 video 列表,要根据滚动来控制该哪个视频来播放 tab 页面里面有不同的数据列表,各个 tab 页面的刷新和加载状态无法重置问题...

    booster 评论0 收藏0
  • 踩坑--- 基于钉钉Weex微应用开发起手式(其实写完发现变成Weex相关资料汇总了)

    摘要:问题,你可以在中文讨论板块提交问题,地址。文字展现必须使用标签关于端的点透事件需要在上层视图上加上,如果上层视图有事件,多加一个中间层,把加在空事件视图上关于事件注意仅支持和,暂不支持。事件会在页面就要关闭时被触发。 好吧,我知道你来看这个文章,一定是遇到坑了,所以,把这几个放在最开始吧 现在,如果你的团队的技术栈是react,请尝试这个吧,跟react很像,如果你的团队一直使用rea...

    zhouzhou 评论0 收藏0

发表评论

0条评论

weizx

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<