问题描述
要遍历一个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
效果图
付费偷看金额在0.1-10元之间
一周热门 更多>