zoukankan      html  css  js  c++  java
  • AngularJS中移动页面滚动穿透解决方案

    (function (angular) {
    angular.module('mobileApp').factory('IscrollAndroidBug', IscrollAndroidBug);
    function IscrollAndroidBug() {
    return {
    click: function () {
    if (/iPhone|iPad|iPod|Macintosh/i.test(navigator.userAgent)) {return false;}
    if (/Chrome/i.test(navigator.userAgent)) {return (/Android/i.test(navigator.userAgent));}
    if (/Silk/i.test(navigator.userAgent)) {return false;}
    if (/Android/i.test(navigator.userAgent)) {
    var s = navigator.userAgent.substr(navigator.userAgent.indexOf('Android') + 8, 3);
    return parseFloat(s[0] + s[3]) >= 44;
    }
    }
    };
    }
    }(angular));
    $scope.$on('ngRepeatListFinished', function () {
    var _scroll = new IScroll('#scroller', {
    probeType: 3,
    preventDefault: false,
    click: IscrollAndroidBug.click()
    });
    var _ele = document.getElementById('apply-requirment');
    _ele.addEventListener('touchmove', function(e){
    e.preventDefault();
    }, false);
    _ele = document.getElementById('scroller');
    _ele.addEventListener('touchmove', function (e) {
    e.preventDefault();
    }, false);
    });
    <div id="apply-requirment" class="requirment-container" ng-if="maskLayerIndex != null" ng-cloak>
    <div ng-click="closeMasking()"></div>
    <div>
    <div class="terms-list" ng-if="maskLayerIndex != null">
    <div>
    <span class="icon-cancel" ng-click="closeMasking()"></span>
    <span ng-bind="maskLayers[maskLayerIndex].title"></span>
    </div>
    <div id="scroller">
    <div>
    <ul>
    <li ng-class="($index==maskLayers[maskLayerIndex].sel)?'condition-checked':'condition-unchecked'"
    ng-repeat="item in maskLayers[maskLayerIndex].text track by $index"
    on-finish-render-filters="ngRepeatListFinished"
    ng-click="onListItemClicked($event, $index)">
    <span ng-bind="item"></span>
    <span ng-show="$index==maskLayers[maskLayerIndex].sel" class="icon-check"></span>
    </li>
    </ul>
    </div>
    </div>
    </div>
    </div>
    </div>






  • 相关阅读:
    Event-Driven Architecture思考
    Kafka分区分配策略分析——重点:StickyAssignor
    Ubiq:A Scalable and Fault-tolerant Log Processing Infrastructure
    11张PPT介绍Paxos协议
    译《The Part-Time Parliament》——终于读懂了Paxos协议!
    谈谈分布式系统的一致性
    Pulsar Consumer实现介绍
    Pulsar-Producer实现简介
    RocketMQ事务消息实现分析
    Apache Pulsar简介
  • 原文地址:https://www.cnblogs.com/jeffen/p/6632985.html
Copyright © 2011-2022 走看看