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. a链接QQ客服 在小框口中打开 感觉不错

    <a href="javascript:;" onClick="javascript:window.open('http://wpa.qq.com/msgrd?v= ...

  2. js中级小知识5

    元素的属性 div.attributes是所有标签属性构成的数据集合 div.classList是所有class名构成的数组集合 在classList的原型链上可以看到add()和remove() 1 ...

  3. HTML01

    1.什么是HTML?(Hyper Text Markup Language:超文本标记语言) 超文本:功能比普通文本更加强大 标记语言:使用一组标签对内容进行描述的一门语言(它不是编程语言) 2.为什 ...

  4. PAT甲级1068 Find More Coins【01背包】

    题目:https://pintia.cn/problem-sets/994805342720868352/problems/994805402305150976 题意: n个硬币,每一个有一个特有的价 ...

  5. Vue事件总线(eventBus)$on()会多次触发解决办法

    项目中使用了事件总线eventBus来进行两个组件间的通信, 使用方法是是建立eventBus.js文件,暴露一个空的Vue实例,如下: import Vue from 'vue'export def ...

  6. Mac同时安装python2和python3

    Mac同时安装python2和python3 Mac自带python2,但因为开发时所用但pythonkennel是3也可能是2,并且就算是python2,版本号也许和内置但python也有所不同.所 ...

  7. Ethzasl MSF源码阅读(3):MSF_Core和PoseMeasurement

    1.MSF_Core的三个函数:ProcessIMU.ProcessExternallyPropagatedState和AddMeasurement MSF_Core维护了状态队列和观测值队列,这里需 ...

  8. Python 运维

    1.python解释器提供提供的小工具 1.1 一秒钟启动一个下载服务器 进入要下载文件的目录(shift+鼠标右键可以很快的在当前目录打开一个cmd) python2: python2 -m Sim ...

  9. PHP----------php-fpm进程数的一些相关配置

    1.其中pm.max_children如何配置:pm.max_children 数量的多少根据机器内存确定,基本上一个进程需要30M的内存,假设起100个进程,那么就是3000M,3G内存. 2.pm ...

  10. eclipse添加spring boot 插件

    在使用eclipse开发时,一般需要添加spring boot的管理插件,这样更方便我们开发,在写application.yml或properties配置的时候,也有相关的提示,而且还可以从配置文件中 ...