angular.module('myApp')

.directive('listActive',functon(){

    return {

      restrict:'A',

      scope:{

        listActive:‘@’

      },

      link:function(scope,element){

        element.children().on('click',function(){

          element.find('.'+scope.listActive).removeClass(scope.Active);

          angular.element(this).addClass(scope.listActive)

        })

      }

    }

})

.directive('iscrollWrapper',["$window",functon($window){

    return {

      restrict:'E',

      transclude:true,
      templateUrl:'templates/iscroll.tpl.html',

      link:function(scope,element,attr){

        var myScroll;

        function createScroll(){

          var ele = angular.element;

          var pullUp = ele('#pullUp'),

            pullUpLable = pullUp.find('.pullUpLable'),

            pullUpIcon = pullUp.find('.pullUpIcon');

            pullDown = ele('#pullDown'),            

            pullDownLable = pullDown.find('.pullDownLable'),

            pullDownIcon = pullDown.find('.pullDownIcon');

            scroller = ele('#scroller');

            loadingStep = 0;

            textFlag = 0;

          pullDown.hide();

          pullUp.hide();

          //init

          var wrapper = document.getElementById('.iscroll-wrapper');

          if(wrapper){

            myScroll = new IScroll(wrapper,{probeType:2,click:true});

          }

          //高度处理

          var head = ele('.header')[0];

          var foot = ele('.footer')[0];

          var headerwrapper = ele('.wrapper-head')[0];

          var height = $window.innerHeight - (head === undefined ? 0 :head.clientHeight) - (foot === undefined ? 0 :foot.clientHeight) - headerwrapper.clientHeight;

          ele(wrapper).css('min-height',height);

          function setCenter(jqobj){

            var parent = jqobj.parent();

            var width = parent.width();

            var half = width/2;

            var selfhalf = jqobj.width()/2;

            jqobj.css('margin-left',half-selfhalf);

          }

          function setCenter(getAdv){

            var adv= ['深度对接‘,'使用同步‘,'飞速价值','dsad...']

            var index= Math.round(Math.random()*3);

            return adv[index];

          }

          

          //滚动时
          myScroll.on('scroll',function(){
            if (textFlag == 0) {
              pullDownLable.html(getAdv());
              textFlag == 1;
            }
            if (loadingStep ==0 && !pullDown.attr('class').match('flip|loading') && !pullUp.attr('class').match('flip|loading')) {
              if (this.y <20 && this.y>0) {
                pullDown.hide()
              }else if (this.y <40 && this.y>20) {
                //显示字
                pullDown.show();
                setCenter(pullDownLable);
                setCenter(pullDownIcon);
              }else if (this.y>40) {
                //下拉刷新效果
                pullDown.show();
                setCenter(pullDownLable);
                setCenter(pullDownIcon);
                myScroll.refresh();
                pullDown.addClass('flip');
                loadingStep = 1;
              }else if (this.y <this.maxScrollY && this.y>(this.maxScrollY - 35)) {
                pullDown.hide()
              }else if (this.y<(this.maxScrollY - 35)) {
                //下拉刷新效果
                pullDown.show();
                setCenter(pullDownLable);
                setCenter(pullDownIcon);
                myScroll.refresh();
                pullDown.addClass('loading');
                loadingStep = 1;
              }
            }

          })
          //滚动完毕
          myScroll.on('scrollEnd',function(){
            textFlag = 0;
            if(loadingStep == 1){
              if (pullUp.attr('class').match(flip|loading)) {
                pullUp.removeClass('flip').addClass('loading');
                pullUpAction();
              }else if (pullDown.attr('class').match(flip|loading)) {
                pullDown.addClass('loading');
                pullDownAction();
              }else{
                pullDown.slideUp();
                pullUp.hide();
              }
            }
          });

          //下拉刷新

          function pullDownAction(){

            pullDown.click();

            setTimeout(function(){

                pullDown.slideUp('slow');

                pullDown.attr('class','');

                ele(scroller).css('min-height',ele(wrapper).height()+1);
                loadingStep = 0;

            },500)

          };

          function pullUpAction(){

            pullUp.click();

            setTimeout(function(){

                pullUp.slideUp('slow');

                pullUp.attr('class','');

                ele(scroller).css('min-height',ele(wrapper).height()+1);
                loadingStep = 0;

            },500)

          };

          wrapper.addEventListener('touchmove',function(e){e.preventDefault();},false);

          return myScroll;

        }

        angular.element(document).ready(function(){

          if(!myScroll){

            var myScroll = cresteScroll();

            scope.myScroll = myScroll;

          }

        })

      }

    }

}])

 <div id='icroll-wrapper' ng-modal='myScroll'>
<div id='scroller'>
<div id='pullDown' ng-click='refreashPage()' class=''>
<span class='pullDownLable'></span>
<span class='pullDownIcon'></span>
</div>
<ul ng-translude ></ul>
<div id='pullUp' ng-click='loadMore()'>
<span class='pullUpLablepullUpIcon'></span>
<span class='pullUpLable'></span>
</div>
</div>
</div>

angular --- s3core移动端项目(三)的更多相关文章

  1. angular --- s3core移动端项目(二)

    product-ctrl.js angular.modules('myApp').controller('ProductCtrl',['$scope','$rootScope','$timeout', ...

  2. angular --- s3core移动端项目

    因为记性不好的原因做个草稿笔记 app.js中 var myApp = angular.module('myApp',['ui.router','oc.lazyLoad','ngAnimate','数 ...

  3. 【angularjs】使用ionic+angular 搭建移动端项目,字体适配

    解析: 首先,rem是以html为基准. 一般的,各大主流浏览器的font-size默认值为16px,此时1rem=16px.如果此时将rem与px进行换算很麻烦,比如0.75rem=12px. 为了 ...

  4. 【angularjs】使用angular搭建PC端项目,开关按钮

    方法一(使用指令) 1.指令(angular-ui-switch.js) angular.module('uiSwitch', []) app.directive('switch', function ...

  5. 采用apicloud开发移动端项目心得体会

    作为第一批吃螃蟹的,来说一说apicloud做移动端项目的一些体会. 刚开始接到项目,需要移动端开发两个项目,公司人员里面没有一个会原生android或者ios开发的,目前能出的技术也就是web,后端 ...

  6. 使用Vue2+webpack+Es6快速开发一个移动端项目,封装属于自己的jsonpAPI和手势响应式组件

    导语 最近看到不少使用vue制作的音乐播放器,挺好玩的,本来工作中也经常使用Vue,一起交流学习,好的话点个star哦 本项目特点如下 : 1. 原生js封装自己的跨域请求函数,支持promise调用 ...

  7. 在Tomcat下部属项目三种方式:

    在Tomcat下部属项目三种方式:       1直接复制:       2. 通过配置虚拟路径的方式    直接修改配置文件 写到tomcat/conf/server.xml     找到<H ...

  8. 曾经的pc端项目踩到的一些兼容性的坑及其解决方案

    曾经公司pc端项目一直最低兼容到IE7,要求和chrome下浏览效果一致,真心坑坏了我和另外一个小伙伴(另一个小伙伴以前也没处理过兼容问题).不过还好,在这里真心感谢鑫哥博客的详解,从底层原理讲到了具 ...

  9. Vue移动端项目总结

    使用Vue项目写了一个移动端项目,然后又把项目硬生生的抽离了组件,一直忙着写RN项目没有时间总结心得,今天上午终于下定决心,写点总结. 1.position:absolute: 定位的时候不同手机的浏 ...

随机推荐

  1. 剑指offer——python【第31题】整数1出现的次数

    题目描述 求出1~13的整数中1出现的次数,并算出100~1300的整数中1出现的次数?为此他特别数了一下1~13中包含1的数字有1.10.11.12.13因此共出现6次,但是对于后面问题他就没辙了. ...

  2. mui APP与服务器之间的交互原理

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...

  3. vue的数据双向绑定和ref获取dom节点

    vue是一个MVVM的框架 业务逻辑代码即js部分是model部分, html是view部分. 当model改变的时候,view也会改变 view 改变是,model也会改变 <template ...

  4. [04-01]css组合选择器

    /* 私人笔记 */   组合选择器:把基本选择器通过特殊符号串在一起,可以带来一些特殊的意义: 1.源码 <!DOCTYPE html> <html lang="zh&q ...

  5. VB调用C# dll

    cd C:\Windows\Microsoft.NET\Framework\v4.0.30319注册regasm myTest.dll /tlb:myTest.tlb

  6. bugfree3.0.1-导入excel测试用例

    大多数项目里只用BugFree做缺陷管理工具,其实还可以通过该工具导入测试用例,记录测试结果,最后获得统计结果. 难点 1.导入文件要求XML格式: 2.一般我们的测试用例都是用excle文件存取,很 ...

  7. docker+kafka+zookeeper+zipkin的安装

    1. 启动zookeeper容器 docker search zookeeper docker pull wurstmeister/zookeeper docker run -d --name zoo ...

  8. idea 无法找到或加载主类

  9. Remove menucool tooltip trial version

    You use this crack on your own risk , i dont reserve any right on this script or what is going to af ...

  10. Solr数据迁移

    单机Solr部署在linux /opt目录下,运行一段时间后发现该目录分配的空间不足,而Solr的索引数据量较大,必须更改相关core下面的data目录,以改变索引存放的目录. 找到相应的solrco ...