这里写目录标题
前言
在ionic前端开发中,我们常常需要使用列表组件来实现列表的功能,而ionic就很好的包装了一组列表组件用于实现列表的功能,ionic中的列表组件主要是ion-list、ion-item等组件,下面我们就利用代码来看一下是具体使用;想要了解更多的ionic列表的使用可以参考网址:https://ionicframework.com/docs/api/list
普通列表
新建页面并展示
首先我们使用语句ionic g page list
新建页面
然后我们在src\app\list\list.page.ts文件中新增一个list数组,并循环添加数字如下:
接着我们就可以在页面src\app\list\list.page.html中使用列表将list展示出来
带箭头的列表
如果我们需要一个带连接箭头的列表可以添加链接
最后显示如下:
line
我们可以设置列表下面的线条的类型,其类型有"full" | “inset” | “none” | undefined四种
分组列表ion-item-divider
在软件中,我们常常可以看到对列表进行分组,例如以字母分组等等,这时就可以用到ion-item-divider了,代码如下
这段代码中,我们将列表分成了A、B两组,页面展示效果如下:
列表中带图标ion-icon
如果我们想在列表中带图标,只需要加入ion-icon即可
代码中,ion-icon中的slot设置图标在左还是在右,name设置图标名称,这个可以去icon图标库https://ionicons.com/中查找,还可以设置其颜色等等,效果如下:
列表中带头像ion-avatar
想要实现列表中带头像,我们可以使用ion-avatar来实现
其中slot设置头像位置在左还是右,里面的img中的src设置头像路径,我们一般将图片放置于assets下
注意src不用设置…/asssets,直接用/assets就可以了
效果如下:
列表中的图片ion-thumbnail
想要在列表中设置图片,就需要用到ion-thumbnail
其设置方式与头像设置基本一致,展现在页面上如下:
滑动列表组件ion-item-sliding、ion-item-options等
使用滑动列表组件,我们需要用到ion-item-sliding、ion-item-options等
其中,ion-item-options滑动弹出的菜单組,其side则设置菜单组是左滑弹出还是右滑弹出;ion-item-option为滑动弹出的具体菜单,页面展示效果如下
左滑:
右滑: