uni-app中页面部分内容使用索引列表(uni-indexed-list),动态数据
一、引入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
五、最终页面
uni-app中页面部分内容使用索引列表(uni-indexed-list),动态数据的更多相关文章
- uni app中使用自定义图标库
项目中难免会用到自定义图标,那在uni app中应该怎么使用呢? 首先, 将图标目录放在static资源目录下: 在main.js中引入就可以全局使用了 import '@/static/icon-o ...
- app中页面滑动,防止a链接误触
问题 app中list列表,当我们用手滑动屏幕,屏幕上页面内容会快速滚动,不会因为手已经离开了屏幕而滚动停止,突然手触摸暂停,当手指是在a标签上面时,会跳转链接,这对客户体验及其不好 思路 先判断滚动 ...
- 用weexplus从0到1写一个app(2)-页面跳转和文章列表及文章详情的编写
说明 结束连续几天的加班,最近的项目终于告一段落,今天抽点时间开始继续写我这篇拖了很久的<用weexplus从0到1写一个app>系列文章.写这篇文章的时候,weexplus的作者已经把w ...
- 提升现代web app中页面性能
提升现代web app的中的页面性能 前言,本文翻译自https://docs.google.com/presentation/d/1hBIb0CshY9DlM1fkxSLXVSW3Srg3CxaxA ...
- uni app中关于图片的分包加载
因为在项目中使用了大量的静态资源图片,使得主包体积过大, 而把这些图片全部放到服务器又有点麻烦,就想能不能把图片也分包,但是直接放在分包下的话导致图片资源找不到了, 在社区中看到大佬分享的十分有用,特 ...
- 怎样禁止手机app 中页面有时候会把数字当做电话号码,从而自动进行打电话功能
想要禁止这种功能,只需要给头不加一个meta标签就可以了, <meta name="format-detection" content="telephone=no& ...
- 静态页面之间的转发与json与ajax做到动态数据
我们见过很多使用jsp ,php,asp的动态网页技术的网站了,我们知道如果一个网站内容更新频率极低,而内容量不是十分庞大时,这样的网站(一次开发完成后不会需要较多的维护成本)的完全可以使用全部使用静 ...
- 浏览器通过Scheme协议启动APP中的页面
在APP开发过程中,通过外部浏览器调起APP页面的场景也很普遍使用.下面就介绍一下通过外部H5页面唤起APP中页面的通用方法. 1.首先需要在AndroidMainifest.xml中对你要启动的那个 ...
- android 从其他app接收分享的内容
Receiving Content from Other Apps[从其他app接收分享的内容] 就像你的程序能够发送数据到其他程序一样,其他程序也能够简单的接收发送过来的数据.需要考虑的是用户与你的 ...
随机推荐
- Python 爬虫如何入门学习?
"入门"是良好的动机,但是可能作用缓慢.如果你手里或者脑子里有一个项目,那么实践起来你会被目标驱动,而不会像学习模块一样慢慢学习. 另外如果说知识体系里的每一个知识点是图里的点,依 ...
- Integer类源码浅析
1.首先Integer提供了两类工具类,包括把一个int类型转成二进等, 其实执行转换算法只有一个方法: public static String toString(int i, int radix) ...
- JDBC API访问数据库的基本步骤。
JDBC本质:官方定义了一套操作所有关系型数据库的规则(接口),各个数据库厂商实现这个接口,提供数据库驱动jar包. 我们可以使用这套接口(JDBC)编程,真正执行的代码是驱动jar包中的实现类. 任 ...
- code first System.Data.Entity.Infrastructure.CommitFailedException: An error was reported while committing a database transaction but it could not be determined whether the transaction succeeded
System.Data.Entity.Infrastructure.CommitFailedException: An error was reported while committing a da ...
- 【重点突破】—— UniApp 微信小程序开发官网学习Two
一.使用Vue.js注意事项 Vue.js在uni-app中使用的差异: 新增:uni-app除了支持Vue实例的生命周期,还支持应用启动.页面显示等生命周期 受限:发布到H5时支持所有vue的语法, ...
- xsens melodic ros driver
sudo apt-get update sudo apt-get install ros-melodic-xsens-driver 设置数据输出: // 输出四元数,加速度.角速度.地磁 python ...
- Python深度学习读书笔记-4.神经网络入门
神经网络剖析 训练神经网络主要围绕以下四个方面: 层,多个层组合成网络(或模型) 输入数据和相应的目标 损失函数,即用于学习的反馈信号 优化器,决定学习过程如何进行 如图 3-1 所示:多个层 ...
- C#中winform下利用ArcEngine调用ArcGIS Server发布的服务 AE9.3
主要使用了AE中的IAGSServerOject接口及IMapServer接口.Private void GetServerTest_Click(object sender, EventArgs e) ...
- 分布式任务队列 Celery —— 应用基础
目录 目录 前文列表 前言 Celery 的周期定时任务 Celery 的同步调用 Celery 结果储存 Celery 的监控 Celery 的调试 前文列表 分布式任务队列 Celery 分布式任 ...
- 阶段3 1.Mybatis_10.JNDI扩展知识_2 补充-JNDI搭建maven的war工程
使用骨架 src下创建test目录 再新建java和resources两个Directory test下面创建java java的目录,让他作为源码的跟目录 test下的java文件夹 选择 完成之后 ...