码迷,mamicode.com
首页 > 移动开发 > 详细

vue移动端webview视频轻应用

时间:2017-12-25 00:51:31      阅读:192      评论:0      收藏:0      [点我收藏+]

标签:技术   com   github   比较   初始化   isp   后端   移动端   c#   

页面:列表页,详情页。

使用的技术:vue,vue-resource,vue-router。

依赖包:video.js

后端:三个接口(修改及新增)

遇到的问题:

1,列表进入详情,视频不初始化,直接在详情刷新初始化。

2,列表上划下划元素空白。

过程:

比较简单的轻应用,只有列表页详情页,地址后台配置,原生入口。

第一次开发视频相关的页面,过程中遇到一个问题,列表进入详情页面,视频没有渲染,断点分析,在异步获取到视频地址之前,video标签已经渲染了,新获取的值没有成功渲染。所以这里加了一个watch监控vue定义在data里的数据,改变的时候赋值并初始化video赋值在一个data数据。

由于是需要开启缓存的,所以在watch里加了判断,watch触发的时候判断是否存在初始化的video,如果存在则注销并将data数据赋值为null。由于注销会将video节点也删除,所以需要重新createElement并插入到html里。然后再初始化video。

列表布局的时候使用了css3 transform来垂直居中,框架中有一条backface-visibility:hidden;,这样会使得列表下划上划的时候元素空白,所以需要设置为backface-visibility:visible;

<代码图片后补>

参考:
video.js
vue-video-player   参考了dispose方法

vue移动端webview视频轻应用

标签:技术   com   github   比较   初始化   isp   后端   移动端   c#   

原文地址:http://www.cnblogs.com/benu/p/8099552.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!