2019-03-08  11:37:04 

ApiCloud+mui完成索引列表例子

主用mui的索引列表，把他的静态数据换成了动态请求数据

效果：

 

有几个问题，整理一下：

1、请求来的数据无排序，先进行排序，找了一个写的非常好的demo

   

1 //排序 2                     function chineseLetter(lists, dataLeven) { 3                         var letter = 'abcdefghjklmnopqrstwxyz'.split('') 4                         var zh = "阿八嚓哒妸发旮哈讥咔垃痳拏噢妑七呥扨它穵夕丫帀".split('') 5                             /* 获取数组元素比较的值 */ 6                         function getValue(option) { 7                             if (!dataLeven) return option 8                             var data = option 9                             dataLeven.split('.').filter(function(item) {10                                 data = data[item]11                             })12                             return data + ''13                         }14                         /* 进行排序 */15                         lists.sort(function(item1, item2) {16                                 return getValue(item1).localeCompare(getValue(item2), 'zh-Hans-CN')17                             })18                             /* 判断需要排序的字符串是否含有中文字符 */19                         if (/[\u4e00-\u9fff]/.test(getValue(lists[0])) && typeof lists[0] === 'object') pySegSort(0, 0)20                             /* 给省列表中添加首字符 */21                         function pySegSort(letterIndex, zhIndex) {22                             var first = true // 首次是否加 字母标识23                             for (var i = zhIndex; i < lists.length; i++) {24                                 var item = lists[i]25                                     //      是否有值 && 当前值大于等于本次字母的最小值 && (最后一位 || 当前值小于下次字母的最小值)26                                 var state = zh[letterIndex] && getValue(item).localeCompare(zh[letterIndex], 'zh') >= 0 && (letterIndex === letter.length - 1 || getValue(item).localeCompare(zh[letterIndex + 1], 'zh') < 0)27                                 if (state) { // 满足条件，同一个首字母下的：例如 A 下的所有省份28                                     if (first) { //是否是第一次出现29                                         item.letter = letter[letterIndex].toUpperCase()30                                         first = false31                                     } else {32                                         item.letter = ''33                                     }34                                 } else { // 递归调用 函数，进行下次字母下的排列35                                     letterIndex++36                                     if (letterIndex < letter.length) {37                                         pySegSort(letterIndex, i)38                                         break39                                     }40                                 }41                             }42                         }43                     }44                     chineseLetter(lists, 'name')

2、用了一个汉字转拼音的demo

3、mui的索引列表例子是用的静态数据，搜索有效，数据换成动态的时候，搜索就无效了

     原因是：在数据加载完之前就已经初始化完成，所以无法查询

     解决方法：

1         mui.init();//把此段代码放在加载数据函数的后面执行 2         mui.ready(function() { 3             var header = document.querySelector('header.mui-bar'); 4             var list = document.getElementById('list'); 5              6             list.style.height = (document.body.offsetHeight - header.offsetHeight) + 'px'; 7             //此处再加一个延时 8             setTimeout(function(){ 9               window.indexedList = new mui.IndexedList(list);10             },1000)11 12         });

4、为列表添加点击事件并把数据广播出去

 

1 list_html += '
' + lists[i].letter + '
' +2              '
' + listname + '
'

 

 

 

 

1      function getpara(ids, names) { 2             api.sendEvent({//执行点击事件，并把id和name广播出去 3                 name: 'getpara', 4                 extra: { 5                     key1: ids, 6                     key2: names 7                 } 8             }); 9 10             api.closeWin();11 12 13         }

 

 

完整代码：

 

1   2   3   4   5     
        6     
        7       8     
        9     
       10     
       11     
       12      42  43  44  45  46     
      
        47         
       
         48             
        
 49             
        
         城市列表
        
 50             
        
 51         
       
 52     
      
 53     
      
        54         
       
         55             
        
          56                 
          57             
        
 58             
        
          59                 
         A 60                 
         B 61                 
         C 62                 
         D 63                 
         E 64                 
         F 65                 
         G 66                 
         H 67                 
         I 68                 
         J 69                 
         K 70                 
         L 71                 
         M 72                 
         N 73                 
         O 74                 
         P 75                 
         Q 76                 
         R 77                 
         S 78                 
         T 79                 
         U 80                 
         V 81                 
         W 82                 
         X 83                 
         Y 84                 
         Z 85             
        
 86             
        
 87             
        
          88                 
         
          没有数据
         
 89                 
         
           90  91                 
         
 92             
        
 93         
       
 94     
      
 95      96      97      98      99     100     101     231 232 233