ms-for 遍历时,如果变量改变,排序会混乱 财富值92

2016-10-18 20:32发布

  1. 问题描述

要遍历一个json数组,elem超过400个,内容存储的图片信息,如果要直接遍历会很慢,所以采用滚动显示的方式。

  1. 实现思路

一个数组a保存要遍历的内容, 滚动时,将数组中的20个elem,放到数组b中,用ms-for 遍历b数组,依次滚动,修改b数组。

  1. 出现的问题

第一次显示的是从1-20,正确的顺序, 滚动加载后 ,顺序变的混乱 。 尝试了 用 orderby 和 修改数组内容后,sort数组的方法,均没有效果。

  1. 模拟代码

<!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条回答

一周热门 更多>