ionic5列表组件

这里写目录标题

• 前言
• 普通列表
• • 新建页面并展示
• 带箭头的列表
• • line
• 分组列表ion-item-divider
• 列表中带图标ion-icon
• 列表中带头像ion-avatar
• 列表中的图片ion-thumbnail
• 滑动列表组件ion-item-sliding、ion-item-options等

前言

在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为滑动弹出的具体菜单，页面展示效果如下
左滑：

右滑：

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！