发表于: 2017-03-04 21:32:09
1 1078
今天完成的事情:
修改文学部、影像部滚动方式
视频详情页,调试播放器;
明天计划的事情:
点赞、收藏、学生证手机验证、邮箱验证l
遇到的问题:
微信页面调试依然好麻烦orz。。。
1、滚动方式
通过设置css属性overflow:auto 或者scroll达到页面可滚动的效果。安卓下微信滚动很顺畅,IOS下不行,所以还是用iscroll实现。这里为了使用方便设置个指令,在需要滚动的DOM节点设置iscroll属性
return function (scope,ele,attr) {
ele.addClass('scroll-wrap');
$timeout(function () {
var scroll=new IScroll('.scroll-wrap',{
mouseWheel: true,
scrollbars: false,//滚动条
tap:true,//触摸事件,用以替代click
click:$rootScope.mobile //根据设备类型设置启用click
})
},100)
iscroll只能设置第一个子节点滚动,故复杂结构需要包裹如下
<div iscroll >//视窗
<div> //包裹层(滚动内容)
<p>111</p>
<div>
<p>111</p>
</div>
</div>
</div>
设置延迟,等待DOM渲染完成后实例化,移动设备时启用click(默认关闭,推荐使用tap更精确,这里为了调试方便设置的,微信为移动端,直接设置为true即可);
2、视频播放
微信内置X5内核浏览器,视频播放时会调用其播放器全屏播放,无法小窗播放,尝试网上的几种方案(IOS: 设置webkit-playsinline、安卓无效;canvas绘制帧数,依然全屏;将视频上传至腾讯视频,失效;微信白名单,已经没用了),
暂无解决办法。已沟通,小窗功能暂不做,那么fixed布局也没有意义了。。。。明天再用iframe试试
收获:
如上
评论