广州.NET培训
达内广州.NET培训中心

18087159764

热门课程

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

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

广州.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”革命式培训

达内广州.net班:阿里与京东会成合作伙伴?

达内.net培训:支付平台交易157.6万亿,增45.6%

微信公开支付交易数据——达内培训

iPhone不支持刷公交,为什么?——广州达内

选择城市和中心
贵州省

广西省

海南省