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

精创光学检测合肥办 發表於 2019-10-4 21:07:00

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

一、引入uni-indexed-list、uni-icons组件
从uni-app插件市场下载或从HBuilder X提供的hello uni-app模板中复制
<img style="border-width: 0; cursor: default" src="https://img2018.cnblogs.com/blog/1809452/201910/1809452-20191004172215164-798780628.png" alt="">
 
 
 二、页面中引用
 <img src="https://img2018.cnblogs.com/blog/1809452/201910/1809452-20191004195500388-84838067.png" alt="">
 
 
 三、对请求获得的数据处理，最终要和官方模板提供的数据结构类似，如下
<img style="border-width: 0; cursor: default" src="https://img2018.cnblogs.com/blog/1809452/201910/1809452-20191004173448299-1373692771.png" alt="">
 
 
 3.1、模拟数据
<img style="border-width: 0; cursor: default" src="https://img2018.cnblogs.com/blog/1809452/201910/1809452-20191004173609055-371233943.png" alt="">
 
 
 3.2、提取数据中name字段的首字母
引入chineseConversion.js文件，js内容如下
<div class="cnblogs_code">
<pre>https://files.cnblogs.com/files/baobao0205/chineseConversion.js</pre>
</div>
 
在页面中引入
<img src="https://img2018.cnblogs.com/blog/1809452/201910/1809452-20191004192730291-1631694817.png" alt="">
 
 
 过滤数据，代码如下
<div class="cnblogs_code">
<pre>onLoad() {</pre>
　　　　let res = [ 　　　　　　{ 　　　　　　　　name: '阿克苏机场', 　　　　　　　　address: '阿克苏机场阿克苏机场' 　　　　　　}, { 　　　　　　　　name: '北京首都国际机场', 　　　　　　　　address: '北京首都国际机场北京首都国际机场' 　　　　　 },{ 　　　　　　　　name: '成都双流国际机场', 　　　　　　　　address: '成都双流国际机场成都双流国际机场' 　　　　　　},{ 　　　　　　　　name: '常德桃花源机场', 　　　　　　　　address: '常德桃花源机场常德桃花源机场' 　　　　　　}, { 　　　　　　　　name: '哈尔滨太平国际机场', 　　　　　　　　address: '哈尔滨太平国际机场哈尔滨太平国际机场' 　　　　　　},{ 　　　　　　　　name: '绵阳南郊机场', 　　　　　　　　address: '绵阳南郊机场绵阳南郊机场' 　　　　　　},{ 　　　　　　　　name: '景德镇机场', 　　　　　　　　address: '景德镇机场景德镇机场' 　　　　　　},{ 　　　　　　　　name: '林芝米林机场', 　　　　　　　　address: '林芝米林机场林芝米林机场' 　　　　　　},{ 　　　　　　　　name: '兰州中川机场', 　　　　　　　　address: '兰州中川机场兰州中川机场' 　　　　　　　　},
          ]　　// 模拟数据
<pre> 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.data.push(item)
 }
 }
 console.log(this.list)
 }</pre>
</div>
四、修改uni-indexed-list.vue
<img src="https://img2018.cnblogs.com/blog/1809452/201910/1809452-20191004210215664-1029509687.png" alt="">
 <img src="https://img2018.cnblogs.com/blog/1809452/201911/1809452-20191102091939364-116807104.png" alt="">
 
 
 <img src="https://img2018.cnblogs.com/blog/1809452/201911/1809452-20191102092018028-1503901032.png" alt="">
 
 
 <img src="https://img2018.cnblogs.com/blog/1809452/201911/1809452-20191102092039023-1647916761.png" alt="">
 
 
 五、最终页面
<img src="https://img2018.cnblogs.com/blog/1809452/201910/1809452-20191004210318939-1014156434.png" alt="">
  
来源：https://www.cnblogs.com/baobao0205/p/11622707.html

頁: [1]

琼殿技术论坛's Archiver

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