尝试webapp框架模板制作,难点与心得

首次接触zepto.js,轻量的移动开发框架,类似JQuery,所以入门还是比较轻松的。选择学习zepto.js原因很简单,因为轻量简洁。

内部地址:webapp框架模板雏形

项目地址:https://github.com/coolhihi/trywebapp

难点

  1. 衰减曲线函数

    我观察了安卓APP里的下拉刷新,属于衰减曲线的范畴,可是百度谷歌死活找不到算法,为了实现效果,我只能用自己想到的sin函数来实现,即前面的下接是1:1的反馈,随着手指划动距离增大,下拉增值衰减,到某个距离不再有下拉。

    抛砖引玉,希望能找到更优秀的算法:

     if(dontop && (touch.y2 - touch.y1 > 0)){
         //起步是页面顶部,且手指是向下划,即认为可能是下拉刷新动作
         //下面$this是已定义的页面容器
         $this.css('position','fixed');
         var tmp=touch.y2 - touch.y1;
         var xx;
         //大于360的下拉距离,不再下拉,否则根据下拉距离计算衰减后的下拉值
         if(tmp>360)
             xx=100;
         else
             xx=Math.floor(Math.sin(Math.PI / 720 * tmp)*100);
             //xx=tmp/3;
         //下拉变化值大于60,则显示“释放刷新”的提示,否则消除该提示
         if(xx>60){
             if(!flushTips){
                 flushTips=document.createElement('div');
                 flushTips.className="oflushtips";
                 flushTips.innerHTML="释放刷新";
                 $(document.body).prepend(flushTips);
             }
         }
         else{
             if(flushTips){
                 $(flushTips).remove();
                 flushTips=null;
             }
         }
         //利用css改变容器位置,模拟下拉效果
         $this.css('top',xx+'px');
         return false;
     }
    
  2. touchmove并不循环触发,touchend无触发,touchcancel中断,实现拖拽的难点

    还是在做下拉刷新的效果中遇到的问题,折腾了很久才找到原因,是因为部分浏览器自带了touchmove的检测,比如谷歌浏览器会在上划时隐藏地址栏,在下拉时显示地址栏,UC也会有相似的处理,然后touchmove后莫名触发touchcancel,然后touchend根本不会触发。。。

    解决办法相对简单,在你不希望浏览器的智能阻碍动作时,在绑定的响应中加入 return false 来阻止冒泡即可。

  3. loading图层的处理技巧

    JS方案我用了灰屏的方式来显示loading,其图层始终至于现在层上方,切入层的下方,而且需要在切入层完全覆盖后才消失,这个方案实用性不是很好,所以被取代了,JS方案传送门:http://demo.gxxsite.com/trywebapp/jsdemo/login.html

    取代的方案是用很小的遮罩层,采用fixed和负值maring的方法处于页面正中央,始终在最上层,在加载前淡入,新页面切入后延迟淡出。效果跟支付宝钱包一样,CSS3方案传送门:http://demo.gxxsite.com/trywebapp/css3demo/login.html

  4. css3的transition属性,延迟修改CSS定义终点

    之前只尝试过通过hover样式来实现css3的渐变,在监听动作(非初始化动作)中执行JS修改CSS,渐变正常出现。但我渴望在ready后直接用JS修改CSS来实现初始动画,然后我发现样式是瞬间变化而非渐变。此问题出现的原因尚未搞懂,但我也算找到暂时的解决办法,就是setTimeout来延迟修改,50ms都足够让渐变复活。。。

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏