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. 将lits集合转化为树状结构

    一,bean的类型: public class DeptListRES { /** * 子节点 */ private List<DeptListRES> children; private ...

  2. Redis实战经验及使用场景

    随着应用对高性能需求的增加,NoSQL逐渐在各大名企的系统架构中生根发芽.这里我们将为大家分享社交巨头新浪微博.传媒巨头Viacom及图片分享领域佼佼者Pinterest带来的Redis实践,首先我们 ...

  3. python3 使用libvirt 相关安装

    1.Linux下有Python2的环境下安装Python3参考: https://www.cnblogs.com/kimyeee/p/7250560.html 2.安装完Python3后,将/usr/ ...

  4. 构造方法 this super

    1 构造方法 1.1 构造方法Constructor概述创建对象要明确属性值,此时需要用到构造方法,即对象创建时要执行的方法,用来给对象的属性进行初始化.在new对象时,知道其执行的构造方法是什么,就 ...

  5. Redis入门到高可用(十六)—— 持久化

    一.持久化概念 二.持久化方式 三.redis持久化方式之——RDB 1.什么是RDB 在 Redis 运行时, RDB 程序将当前内存中的数据库快照保存到磁盘文件中, 在 Redis 重启动时, R ...

  6. JavaBean持久化

    JavaBean持久化并不局限于Swing构件的存储,可以使用该机制存储任意对象的集合,只要遵守一些简单的规则即可. XMLEncoder内置了对下列类型的支持: ●null ●所有基本类型及其包装器 ...

  7. percona-toolkit工具的使用

    percona-toolkit是一组高级命令行工具的集合,可以查看当前服务的摘要信息,磁盘检测,分析慢查询日志,查找重复索引,实现表同步等等 percona-toolkit 源自 Maatkit 和 ...

  8. 《CSS世界》读书笔记(五) --height:100%

    <!-- <CSS世界> 张鑫旭著 --> 相对简单而单纯的height:auto height:auto比width:auto简单的多,原因在于: CSS默认流是水平方向的, ...

  9. js 清空html input file的值

    在做上传图片预览时,利用input onchange事件触发函数,但是type=file时,一定记得新建要清空原来的图片,因为原来的图片还存在在input里面,再选重复的图片没有change,故不会触 ...

  10. 网页布局要注意的事项,以及CSS3需要特别注意的地方。

    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;隐藏超出部分,出省略号 一定要先布局!布局!布局!要先设置好色块,将位置确 ...