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. TS的一些小东西

    首先介绍下泛型的三种方法,函数声明,函数表达式,箭头函数 function Interview2<T>(name:T):T{ return name } let mn=function&l ...

  2. python全栈开发 * 15知识点汇总 * 180621

    #15 函数二 与 匿名函数1.dir() # 查看内置属性,将对象所有方法名放在另一个列表中.dic={"水果":"香蕉",'蔬菜':"土豆&quo ...

  3. Java 8 Stream API说明

    Java 8增加了很多强大的功能,流(stream)就是其中之一.现在对api的使用做个说明: map 对流中的元素做转换,目前jdk提供了mapToInt,mapToLong,mapToDouble ...

  4. 列表 & 元组& join & range

    一:列表(增删改查,列表的嵌套,列表的循环) 1)增加 append    (在列表的尾部增加) insert       (插入)   insert(插入的位置,插入的内容) extend      ...

  5. GitHub的操作

    一.查看自己的信息:git config --list 修改config文件:01.输入vim ~/.gitconfig(回车) 02.点击 i.o或a 进入编辑模式 03.修改所要修改的信息 04. ...

  6. axios跨域请求报错

    在nodejs的入口js中的配置路由之前加入这一段就可以了 app.all('*', function(req, res, next) { res.header("Access-Contro ...

  7. Centos7.1环境下搭建SVN

    环境准备: 系统 配置 IP Centos7.1 1核2G+60GB硬盘 10.10.28.204 1.安装 sudo yum install subversion 查看版本 svnserve –-v ...

  8. mssql卸载后重新安装 错误解决

    1.instance id already in use http://www.sqlservercentral.com/articles/MSSQLSERVER/161398/ 2.提示没有重启 删 ...

  9. Unity之获取资源包的路径

    先从缓存中获取,如果获取不到,则从包中获取. 如下: public static string GetAssetBundlePath(string path) { // 先尝试从 persist 目录 ...

  10. day03 Python字典dict的增删查改及常用操作

    字典是python中唯一的映射类型,采用键值对(key-value)的形式存储数据.python对key进行哈希函数运算,根据计算的结果决定value的存储地址,所以字典是无序存储的,且key必须是可 ...