angularjs 滑块验证码 移动端_Angularjs中ng-repeat与移动端滑动插件iScroll的冲突

滑动不正常原因：

1.在ng-repeat未将列表循环展示出来时，iScroll便被启动了，导致滑动异常，因此需要确保ng-repeat循环完毕后再初始化iScroll

2.在动态的向ng-repeat循环列表中添加内容后，需要重新设置滑动区域#scroller的宽度，然后重新初始化一下iScroll插件

Title

* {

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;

}

• {{item}}

add

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

});

}

}]);

你要的学习资料到了-WEB前端互动交流群04

本裙会一直开放，欢迎喜欢交流的小伙伴们加入！