uniapp组件-uni-indexed-list索引列表

水深无声 2021-07-25 11:21 857阅读 0赞

官方示例：[https://ext.dcloud.net.cn/plugin?id=375][https_ext.dcloud.net.cn_plugin_id_375]

## 效果图： ##

![20210301130807358.gif][]

## 代码实现： ##

<template>
    	<uni-indexed-list :options="list" :show-select="true" @click="bindClick" />
    </template>
    
    <script>
    export default {
    	components: {},
    	data() {
    		return {
    			list: [
    				{
    					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: ['湛江机场', '昭通机场']
    				}
    			]
    		};
    	},
    	methods: {
    		bindClick(e) {
    			uni.showToast({
    				title: '点击item，返回数据' + JSON.stringify(e),
    				icon: 'none'
    			})
    		}
    	}
    };
    </script>
    
    <style></style>

[https_ext.dcloud.net.cn_plugin_id_375]: https://ext.dcloud.net.cn/plugin?id=375
[20210301130807358.gif]: https://img-blog.csdnimg.cn/20210301130807358.gif