<script src="../lib/avalon.modern.js"></script>
<script src="../lib/iscroll-infinite.js"></script>
<script src="../lib/zepto.min.js"></script>
<style>
#scroller {
position: absolute;
z-index: 1;
-webkit-tap-highlight-color: rgba(0,0,0,0);
width: 100%;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-text-size-adjust: none;
-moz-text-size-adjust: none;
-ms-text-size-adjust: none;
-o-text-size-adjust: none;
text-size-adjust: none;
overflow: hidden;
border: 1px solid black;
height: 360px
}
#scroller ul {
list-style: none;
padding: 0;
margin: 0;
width: 100%;
text-align: left;
position: relative;
}
#scroller li {
position: absolute;
width: 100%;
top: 0;
left: 0;
-webkit-transform: translateZ(0);
-moz-transform: translateZ(0);
-ms-transform: translateZ(0);
-o-transform: translateZ(0);
transform: translateZ(0);
padding: 0 10px;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
border-top: 1px solid #fff;
background-color: #fafafa;
font-size: 16px;
}
</style>
</head>
<body>
<h2>Avlon IScroll Test</h2>
<div ms-controller="test">
<div id="scroller" ms-on-scroll="scroll" ms-on-scrollstart="start">
<ul>
<li ms-repeat="arr" ms-on-tap="view(el)" ms-css-display="el.name ? 'block' : 'none'">{{el.name}}</li>
</ul>
</div>
</div>
</body>
<script>
require("../avalon.iscroll", function(avalon) {
var test = window.test = avalon.define('test', function(vm) {
vm.arr = [];
vm.arr$ = [];
vm.iscroll = {
id: 'scrollTest',
// infiniteElements: '#scroller ul li',
infiniteLimit: 25,
showLines: 10,
getData : function(start, count) {
console.log('加载数据: start = ' + start + ' count = ' + count);
setTimeout(function() {
console.log('加载完成');
if (vm.arr.length < 50) {
for (var i = vm.arr.length; i < start + count; i ++) {
test.arr.push({
name : 'item-' + (i + 1)
});
}
}
}, 1000);
}
};
vm.view = function(el) {
el.name += '#';
console.log("dddddddddddd")
};
vm.start = function() {
// console.log('scrollStart', arguments, this);
};
vm.scroll = function() {
// console.log('scroll', arguments, this);
};
});
setTimeout(function() {
test.arr = avalon.range(1,26).map(function(item){
return {
name: 'item-' + item
};
});
}, 500);
avalon.scan();
});
</script>
这样引入zepto，ms-on-tap="view(el)" 会触发多次
<title>Avalon iScroll Test</title>如果用ms-click的时候，会触发一次。可是在这触发方法弹出框 里我点击"确定"或"取消"的时候要过3秒左右才能点击