一、引入uni-indexed-list、uni-icons組件
從uni-app插件市場下載或從HBuilder X提供的hello uni-app模板中復制
二、頁面中引用
三、對請求獲得的數據處理，最終要和官方模板提供的數據結構類似，如下
3.1、模擬數據
3.2、提取數據中name字段的首字母
引入chineseConversion.js文件，js內容如下
https://files.cnblogs.com/files/baobao0205/chineseConversion.js
在頁面中引入
過濾數據，代碼如下
onLoad() {
let res = [
{
name: '阿克蘇機場',
address: '阿克蘇機場阿克蘇機場'
}, {
name: '北京首都國際機場',
address: '北京首都國際機場北京首都國際機場'
},{
name: '成都雙流國際機場',
address: '成都雙流國際機場成都雙流國際機場'
},{
name: '常德桃花源機場',
address: '常德桃花源機場常德桃花源機場'
}, {
name: '哈爾濱太平國際機場',
address: '哈爾濱太平國際機場哈爾濱太平國際機場'
},{
name: '綿陽南郊機場',
address: '綿陽南郊機場綿陽南郊機場'
},{
name: '景德鎮機場',
address: '景德鎮機場景德鎮機場'
},{
name: '林芝米林機場',
address: '林芝米林機場林芝米林機場'
},{
name: '蘭州中川機場',
address: '蘭州中川機場蘭州中川機場'
},
] // 模擬數據
let letterList = [] for (let item of res) { let letter = initial(item.name) let index = letterList.indexOf(letter) if (index === -1) { letterList.push(letter) let obj = { letter: '', data: [] } obj.letter = letter obj.data.push(item) this.list.push(obj) } else { this.list[index].data.push(item) } } console.log(this.list) }
四、修改uni-indexed-list.vue
五、最終頁面
