开课中国  |  [Investor Relations]   |  官方微博

广州.NET培训中心

美国上市公司 · 亿元级外企.NET培训企业

  • Angularjs中ng-repeat与移动端滑动插件iScroll的冲突原因是什么?

    发布:IT      来源:IN      时间:2017-05-05        

  • 广州.Net培训机构搜集原因如下: 1.在ng-repeat未将列表循环展示出来时,iScroll便被启动了,导致滑动异常,因此需要确保ng-repeat循环完毕后再初始化iScroll 2.在动态的向ng-repeat循环列表中添加内容后,需要重新设置滑动区域#scroller的宽度,然后重新初始化一下iScroll插件

  • 广州.Net培训机构搜集原因如下:
    1.在ng-repeat未将列表循环展示出来时,iScroll便被启动了,导致滑动异常,因此需要确保ng-repeat循环完毕后再初始化iScroll
    2.在动态的向ng-repeat循环列表中添加内容后,需要重新设置滑动区域#scroller的宽度,然后重新初始化一下iScroll插件

    <!DOCTYPE html>

    <html lang="en" ng-app="myApp">

    <head>

    <meta charset="UTF-8">

    <title>Title</title>

    <script src="https://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script>

    <script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>

    <style>

    * {

    margin: 0;

    padding: 0;

    }

    #wrapper {

    position: absolute;

    z-index: 1;

    width: 100%;

    height: 100px;

    top:0;

    left:0;

    }


    #scroller {

    position: absolute;

    z-index: 1;

    width: 500px;

    height: 100%;

    }

    ul {

    width: 100%;

    height: 100%;

    text-align: center;

    }

    li {

    display: block;

    float: left;

    width: 100px;

    height: 100%;

    line-height: 100px;

    }

    </style>

    </head>

    <body g-controller="myCtrl">


    <div>

    <div id="wrapper">

    <div id="scroller">

    <ul>

    <li ng-repeat="item in ames track by $index">

    {{item}}

    </li>

    </ul>

    </div>

    </div>


    <button g-click="addItem()" style="margin-top: 350px">add</button>

    </div>


    <script>

    var app = angular.module('myApp', []);


    app.controller('myCtrl', ['$scope', function ($scope) {

    $scope.names = [1, 2, 3, 4, 5];

    $scope.count = 6;

    $scope.addItem = function () {

    $('#scroller').css('width', $scope.count * 100 + 'px');

    $scope.names.push($scope.count++);

    loaded();

    };


    var myScroll;

    window.onload = function () {

    loaded();

    };

    function loaded() {

    myScroll = new IScroll('#wrapper', {

    scrollX: true,

    scrollY: false,

    mouseWheel: true

    });

    }

    }]);


    </script>

    </body>

    </html>

  • 上一篇:亚马逊意进军VR购物新战场容易吗?

    下一篇:达内Net就业分析:Net课程采用“5+4”革命式培训

2001-2016 达内时代科技集团有限公司 版权所有 京ICP证8000853号-56