iscrll5使用的事例

iscroll5下拉刷新，包括滑动过程中处理头部样式，判断滑动手势的处理

• html大体结构

        <div id="wrapper">
           <div class="container" id="scroller">
               <div id="pulldown" class="">
                   <div class="pulldownlabel"></div>
               </div>
               <div class="pulldown-tips"></div>
               <div class="header"></div>
               <div class="content">
               ...
               </div>
           </div>
       </div>

• javascript部分

 myScroll: function() {
            var that = this;
            //下拉刷新获取对应dom
            var myScroll,
                pullDown = $("#pulldown"),
                pullDownHeight = pullDown.height(),
                pullDownLabel = $(".pulldownlabel"),
            pullDown.hide();

            //处理头部样式，获取各个dom
            var $headerWrap = $(".header-custom"), //头部dom
                $scrollWrap = $(".header"),
                scrollHeight = $scrollWrap.outerHeight() - $headerWrap.outerHeight(), //可滑动的距离
                $title = $(".header-custom-menu .title"), //头部标题dom,
                wrapHeight = $("#wrapper").outerHeight(),
                dyHeight = 0,
                opacity = 0,
                //滑动过程中捕捉y值，动态处理头部样式的问题，需根据具体情形再改造
                scrollFunc = function(y) {
                    if (y === void(666) || isNaN(y)) {
                        base.log(y);
                        that.myScroll.disable();
                        return;
                    }
                    dyHeight = scrollHeight + y;
                    opacity = (1 - dyHeight / scrollHeight);
                    //头部渐变
                    $(".header-custom-bg").css({
                        opacity: opacity
                    });

                    if (Math.abs(y) > scrollHeight) {
                        $title.css({
                            opacity: 1
                        });
                    } else {
                        $title.css({
                            opacity: 0
                        });
                    }
                };
            //解决iscroll不足一屏时，不能下拉的问题
            $(".container").css("min-height", wrapHeight + 1);
            //iscroll生成
            this.myScroll = new IScroll('.index #wrapper', {
                probeType: 3,
                bounce: true, //起始结束位置的弹性
                HWCompositing: true, //是否硬件加速
                preventDefault: false,
                scrollX: false
            });
            //滚动触发
            this.myScroll.on("scroll", function() {
                scrollFunc(this.y);
                //下拉显示下拉刷新信息
                //loadingStep  加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新 
                if (that.loadingStep == 0 && !pullDown.hasClass('refresh')) {
                    if (this.y > pullDownHeight) { //下拉刷新操作  
                        $(".pulldown-tips").hide();
                        pullDown.addClass("refresh").show();
                        pullDownLabel.text("释放刷新，最后更新" + that.refreshTime);
                        that.loadingStep = 1;
                        that.myScroll.refresh();
                    }
                }
                //处理滑出iscroll范围，滑动事件消失，无法触发scrollEnd事件，而导致的无法回弹效果
                //手势滑出上下边界时，让iscroll回弹至初始位置
                if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
                    that.myScroll.scrollTo(0, 0, 400);
                    return;
                }
            });
            //停止滚动触发
            this.myScroll.on("scrollEnd", function() {
                scrollFunc(this.y);
                //松开然后刷新
                if (that.loadingStep == 1) {
                    if (pullDown.hasClass("refresh")) { //下拉刷新操作  
                        pullDown.removeClass("refresh");
                        pullDownLabel.text("正在刷新，最后更新" + that.refreshTime);
                        that.loadingStep = 2;
                        that.pullDownAction();
                    }
                }
            });
            $(".main").on("touchstart", function() {
                that.myScroll.enable();
            });
            //返回角度
            function getslideangle(dx, dy) {
                return Math.atan2(dy, dx) * 180 / Math.PI;
            }

            //根据起点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
            function getslidedirection(startX, startY, endX, endY) {
                var dy = startY - endY;
                var dx = endX - startX;
                var result = 0;

                //如果滑动距离太短
                if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
                    return result;
                }

                var angle = getslideangle(dx, dy);
                if (angle >= -30 && angle < 30) {
                    result = 4;
                } else if (angle >= 30 && angle < 150) {
                    result = 1;
                } else if (angle >= -150 && angle < -30) {
                    result = 2;
                } else if ((angle >= 150 && angle <= 180) || (angle >= -180 && angle < -150)) {
                    result = 3;
                }

                return result;
            }

            //滑动处理
            var startX, startY;
            document.addEventListener('touchstart', function(ev) {
                startX = ev.touches[0].pageX;
                startY = ev.touches[0].pageY;
            }, false);
            document.addEventListener('touchmove', function(ev) {
                var endX, endY;
                endX = ev.changedTouches[0].pageX;
                endY = ev.changedTouches[0].pageY;
                var direction = getslidedirection(startX, startY, endX, endY);
                switch (direction) {
                    case 0:
                        break;
                    case 1:
                        //向上滑动
                        ev.preventDefault();
                        break;
                    case 2:
                        //向下滑动
                        ev.preventDefault();
                        break;
                    case 3:
                        //向左滑动
                        that.myScroll.enable();
                        break;
                    case 4:
                        //向右滑动
                        that.myScroll.enable();
                        break;
                    default:
                }
            }, false);
        }