发表于: 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试试


收获:

如上


返回列表 返回列表
评论

    分享到