ms-for 遍历时，如果变量改变，排序会混乱
问题描述
要遍历一个json数组，elem超过400个，内容存储的图片信息，如果要直接遍历会很慢，所以采用滚动显示的方式。
实现思路
一个数组a保存要遍历的内容， 滚动时，将数组中的20个elem，放到数组b中，用ms-for 遍历b数组，依次滚动，修改b数组。
出现的问题
第一次显示的是从1-20,正确的顺序， 滚动加载后 ，顺序变的混乱 。 尝试了 用 orderby 和 修改数组内容后，sort数组的方法，均没有效果。
模拟代码
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="./avalon.js"></script>
<script>
var vm = avalon.define({
$id: "test",
box: [{index:1,name:1},{index:2,name:2},{index:3,name:3},{index:4,name:4},{index:5,name:5},{index:6,name:6},{index:7,name:7},{index:8,name:8},{index:9,name:9},{index:10,name:10},{index:11,name:11},{index:12,name:12},{index:13,name:13},{index:14,name:14},{index:15,name:15},{index:16,name:16},{index:17,name:17},],
show: [],
btnshow:function(){
var b = JSON.parse(JSON.stringify(vm.box));
var s = JSON.parse(JSON.stringify(vm.show));
if (b.length - s.length > 4) {
s = b.slice(0, s.length + 4);
}
vm.show = s;
}
});
</script>
</head>
<body ms-controller="test">
<button ms-click="@btnshow">增加</button>
<ul>
<li ms-for="($index,el) in @show ">
<span>{{$index +1}} : </span>
<span>{{el.index}}</span>
</li>
</ul>
</body>
</html>用点击按钮模拟滚动加载
avalon版本2.1.5
效果图
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
测试模拟代码在 IE11、Egde、Chrome新版环境下，使用最新版 avalon.js 测试未复现所说问题。