uni app 自动化索引列表

以你之姓@ 2023-07-17 12:47 18阅读 0赞

uni app 自动化索引列表，官方推荐的第三方插件  
[https://ext.dcloud.net.cn/plugin?id=375][https_ext.dcloud.net.cn_plugin_id_375]

[{
        "letter": "A",
        "data": [
            "阿克苏机场",
            "阿拉山口机场",
            "阿勒泰机场",
            "阿里昆莎机场",
            "安庆天柱山机场",
            "澳门国际机场"
        ]
    }, {
        "letter": "B",
        "data": [
            "保山机场",
            "包头机场",
            "北海福成机场",
            "北京南苑机场",
            "北京首都国际机场"
        ]
    }]

数据格式必须自己往对应字母数组里填充数据，我们服务端返回的数据，没按照这种已经分好声母类别的数据下发，，必须先做声母分类，第三方插件没做。

网上自己找了个声母分类填充数据的js方法，然后再按照官方插件要求格式填充数据，调用 **buildTextData** 方法，参数arr是服务器下发数组数据， **obj.psnName**，请按照实际字段名称填写，等同于 **“北京首都国际机场”** 数据，， 就可以把所有数据填充上，复制给插件的组件数据，就可以显示出来了。

<template>
    	<view >
    		<uni-indexed-list :options="showArr" :show-select="false" @click="bindClick"/>
    	</view>
    </template>
    
    <script>
    	import uniIndexedList from '@/components/uni-indexed-list/uni-indexed-list.vue'
    	export default {
    		components: {
    			uniIndexedList
    		},
    		data() {
    			return {
    			}
    		},
    		methods: {
    			buildTextData: function(arr){
    				var textData = [{ letter: "A", data: [] }, 
    					 { letter: "B", data: [] }, 
    					 { letter: "C", data: [] }, 
    					 { letter: "D", data: [] }, 
    					 { letter: "E", data: [] }, 
    					 { letter: "F", data: [] }, 
    					 { letter: "G", data: [] }, 
    					 { letter: "H", data: [] }, 
    					 { letter: "I", data: [] }, 
    					 { letter: "J", data: [] }, 
    					 { letter: "K", data: [] }, 
    					 { letter: "L", data: [] }, 
    					 { letter: "M", data: [] },
    					 { letter: "N", data: [] }, 
    					 { letter: "O", data: [] }, 
    					 { letter: "P", data: [] }, 
    					 { letter: "Q", data: [] }, 
    					 { letter: "R", data: [] }, 
    					 { letter: "S", data: [] }, 
    					 { letter: "T", data: [] }, 
    					 { letter: "U", data: [] }, 
    					 { letter: "V", data: [] }, 
    					 { letter: "W", data: [] }, 
    					 { letter: "X", data: [] }, 
    					 { letter: "Y", data: [] }, 
    					 { letter: "Z", data: [] }, 
    					 { letter: "#", data: [] }];
    					
    					for (var i = 0; i < arr.length; i++) {
    						var obj = arr[i];
    						var firstChar = obj.psnName.substr(0, 1);
    						firstChar = firstChar.toUpperCase();
    						var reg = this.query(firstChar)[0];
    						var temIndex = this.charsABC.indexOf(reg);
    						if (temIndex == -1){
    							temIndex = 26;
    						}
    						textData[temIndex].data.push(obj);
    					}
    					return textData;
    			}
    			
    		}
    	}
    </script>

声母分类填充数据的js方法，代码如下:

参考  
[https://ext.dcloud.net.cn/plugin?id=375][https_ext.dcloud.net.cn_plugin_id_375]  
[https://ext.dcloud.net.cn/plugin?id=172][https_ext.dcloud.net.cn_plugin_id_172]

[https_ext.dcloud.net.cn_plugin_id_375]: https://ext.dcloud.net.cn/plugin?id=375
[https_ext.dcloud.net.cn_plugin_id_172]: https://ext.dcloud.net.cn/plugin?id=172