关于islid插件：与移动端滑动插件iScroll的冲突
关于islid插件：与移动端滑动插件iScroll的冲突<script src="https://img.aigexing.comhttps://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script> <title>Title</title><html ng-app="myApp"><head> <meta charset="UTF-8">
滑动不正常原因：
1.在ng-repeat未将列表循环展示出来时，iScroll便被启动了，导致滑动异常，因此需要确保ng-repeat循环完毕后再初始化iScroll
2.在动态的向ng-repeat循环列表中添加内容后，需要重新设置滑动区域#scroller的宽度，然后重新初始化一下iScroll插件
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://img.aigexing.comhttps://cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
<script src="https://img.aigexing.comhttps://cdn.bootcss.com/iScroll/5.2.0/iscroll.min.js"></script>
<script src="https://img.aigexing.comhttp://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 ng-controller="myCtrl">
<div>
<div id="wrapper">
<div id="scroller">
<ul>
<li ng-repeat="item in names track by $index">
{{item}}
</li>
</ul>
</div>
</div>
<button ng-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>
你要的学习资料到了-前端/JAVA/PHP学习交流群
本裙会一直开放，欢迎喜欢交流的小伙伴们加入！
