热门标签 | HotTags
当前位置:  开发笔记 > 编程语言 > 正文

基于vue2.0+weex开辟app当中碰到的题目(爬坑之旅)

前端小白一枚,经由过程打仗一段时间的weex,谈下本身的主意和个中遇到的题目如今先来说下遇到的题目:在一个页面中是video列表,要依据转动来掌握该哪一个视频来播放tab页面内里有

前端小白一枚,经由过程打仗一段时间的 weex,谈下本身的主意和个中遇到的题目

如今先来说下遇到的题目:

  1. 在一个页面中是 video 列表,要依据转动来掌握该哪一个视频来播放

  2. tab 页面内里有差别的数据列表,各个 tab 页面的革新和加载状况没法重置题目

  3. ….

遇到的两个大的题目,内里另有诸多的小题目

献上处理办法:

依据 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 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,如今项目还在举行中,后续遇到的题目和处理方案也会加进来。

逐步举行,爬坑之旅,

《&#8211;愿望人人多多指导&#8211;》


推荐阅读
  • android listview OnItemClickListener失效原因
    最近在做listview时发现OnItemClickListener失效的问题,经过查找发现是因为button的原因。不仅listitem中存在button会影响OnItemClickListener事件的失效,还会导致单击后listview每个item的背景改变,使得item中的所有有关焦点的事件都失效。本文给出了一个范例来说明这种情况,并提供了解决方法。 ... [详细]
  • Mac OS 升级到11.2.2 Eclipse打不开了,报错Failed to create the Java Virtual Machine
    本文介绍了在Mac OS升级到11.2.2版本后,使用Eclipse打开时出现报错Failed to create the Java Virtual Machine的问题,并提供了解决方法。 ... [详细]
  • 《数据结构》学习笔记3——串匹配算法性能评估
    本文主要讨论串匹配算法的性能评估,包括模式匹配、字符种类数量、算法复杂度等内容。通过借助C++中的头文件和库,可以实现对串的匹配操作。其中蛮力算法的复杂度为O(m*n),通过随机取出长度为m的子串作为模式P,在文本T中进行匹配,统计平均复杂度。对于成功和失败的匹配分别进行测试,分析其平均复杂度。详情请参考相关学习资源。 ... [详细]
  • Nginx使用(server参数配置)
    本文介绍了Nginx的使用,重点讲解了server参数配置,包括端口号、主机名、根目录等内容。同时,还介绍了Nginx的反向代理功能。 ... [详细]
  • 基于layUI的图片上传前预览功能的2种实现方式
    本文介绍了基于layUI的图片上传前预览功能的两种实现方式:一种是使用blob+FileReader,另一种是使用layUI自带的参数。通过选择文件后点击文件名,在页面中间弹窗内预览图片。其中,layUI自带的参数实现了图片预览功能。该功能依赖于layUI的上传模块,并使用了blob和FileReader来读取本地文件并获取图像的base64编码。点击文件名时会执行See()函数。摘要长度为169字。 ... [详细]
  • 本文讨论了Alink回归预测的不完善问题,指出目前主要针对Python做案例,对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法,以及Maven的相关知识。最后,对Alink回归预测的未来发展提出了期待。 ... [详细]
  • 原文地址:https:www.cnblogs.combaoyipSpringBoot_YML.html1.在springboot中,有两种配置文件,一种 ... [详细]
  • baresip android编译、运行教程1语音通话
    本文介绍了如何在安卓平台上编译和运行baresip android,包括下载相关的sdk和ndk,修改ndk路径和输出目录,以及创建一个c++的安卓工程并将目录考到cpp下。详细步骤可参考给出的链接和文档。 ... [详细]
  • Android Studio Bumblebee | 2021.1.1(大黄蜂版本使用介绍)
    本文介绍了Android Studio Bumblebee | 2021.1.1(大黄蜂版本)的使用方法和相关知识,包括Gradle的介绍、设备管理器的配置、无线调试、新版本问题等内容。同时还提供了更新版本的下载地址和启动页面截图。 ... [详细]
  • 1,关于死锁的理解死锁,我们可以简单的理解为是两个线程同时使用同一资源,两个线程又得不到相应的资源而造成永无相互等待的情况。 2,模拟死锁背景介绍:我们创建一个朋友 ... [详细]
  • Linux重启网络命令实例及关机和重启示例教程
    本文介绍了Linux系统中重启网络命令的实例,以及使用不同方式关机和重启系统的示例教程。包括使用图形界面和控制台访问系统的方法,以及使用shutdown命令进行系统关机和重启的句法和用法。 ... [详细]
  • 开发笔记:加密&json&StringIO模块&BytesIO模块
    篇首语:本文由编程笔记#小编为大家整理,主要介绍了加密&json&StringIO模块&BytesIO模块相关的知识,希望对你有一定的参考价值。一、加密加密 ... [详细]
  • 本文介绍了Java工具类库Hutool,该工具包封装了对文件、流、加密解密、转码、正则、线程、XML等JDK方法的封装,并提供了各种Util工具类。同时,还介绍了Hutool的组件,包括动态代理、布隆过滤、缓存、定时任务等功能。该工具包可以简化Java代码,提高开发效率。 ... [详细]
  • 在说Hibernate映射前,我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象,以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
  • 本文详细介绍了在ASP.NET中获取插入记录的ID的几种方法,包括使用SCOPE_IDENTITY()和IDENT_CURRENT()函数,以及通过ExecuteReader方法执行SQL语句获取ID的步骤。同时,还提供了使用这些方法的示例代码和注意事项。对于需要获取表中最后一个插入操作所产生的ID或马上使用刚插入的新记录ID的开发者来说,本文提供了一些有用的技巧和建议。 ... [详细]
author-avatar
小妖694_807
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有