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. hdu 1045

    http://acm.hdu.edu.cn/showproblem.php?pid=1045 Fire Net Time Limit: 2000/1000 MS (Java/Others)    Me ...

  2. Consul部署架构

    Consul 使用 Raft 算法来保证一致性, 比复杂的 Paxos 算法更直接,用于实现分布式系统的服务发现与配置. 应用Consul提供的服务需要建立Consul集群.在Consul方案中,每个 ...

  3. python摸爬滚打之day26----网络编程之socket

    1.网络通信原理 互联网的本质就是一系列的网络协议, 统称为互联网协议. 互联网协议的功能:定义计算机如何接入internet,以及接入internet的计算机通信的标准. 互联网协议按照功能不同分为 ...

  4. Cartographer源码阅读(4):Node和MapBuilder对象2

    MapBuilder的成员变量sensor::Collator sensor_collator_; 再次阅读MapBuilder::AddTrajectoryBuilder方法.首先构造了mappin ...

  5. python 关于 input

    name = input("请输入你的姓名:") print(name) 解释:input表示输入,当你输入一个名字的时候, 它打印出来的东西,也就是你输入的东西, 结果: 请输入 ...

  6. 使用PageHelper插件分页结合mybatis返回的列表个数不对问题解决

    问题描述:spring mvc+mybatis项目中,当使用PageHelper插件进行分页查询时,查到的总数据量值是正确的,但是查询当前页返回的列表个数不对.比如每页查询10条,返回2条或者3条.r ...

  7. OpenStack-RabbitMQ-获取vm、磁盘、网络设备的状态变化

    需求 及时知道vm,硬盘,镜像,网络设备.负载均衡器状态变化 分析 Dashboard中也是通过定时使用ajax调用API来获取虚拟机的状态信息的定时轮训的方式过于被动 解决方案 共用rabbitmq ...

  8. 学习使用scrapy itemspipeline过程

    开始非常不理解from https://www.jianshu.com/p/18ec820fe706 找到了一个比较完整的借鉴,然后编写自己的煎蛋pipeline 首先在items里创建 image_ ...

  9. MySQL 5.6 (Win7 64位)下载、安装与配置图文教程

    一. 工具 Win7 64位操作系统 二. 步骤 第一步:下载安装包 下载 地址:http://www.mysql.com/ 截止到目前(2016/7/24) ,官网的最新版本是5.7.13,不过自己 ...

  10. jQuery图片无缝轮播

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...