查看: 81|回覆: 0

uni-app中页面部分内容使用索引列表(uni-indexed-list),动态数据

[複製鏈接]

2

主題

0

回帖

0

積分

热心网友

金币
0
閲讀權限
220
精華
0
威望
0
贡献
0
在線時間
0 小時
註冊時間
2009-12-18
發表於 2019-10-4 21:07:00 | 顯示全部樓層 |閲讀模式

一、引入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

 

 

 

 

 

 

 

 

 

 五、最终页面

 



来源:https://www.cnblogs.com/baobao0205/p/11622707.html
回覆

使用道具 舉報

您需要登錄後才可以回帖 登錄 | 立即注册

本版積分規則

相关侵权、举报、投诉及建议等,请发 E-mail:qiongdian@foxmail.com

Powered by Discuz! X5.0 © 2001-2026 Discuz! Team.

在本版发帖返回顶部