列表

常在iOS应用中看到的列表,是种多功能且强大的交互组件。列表将数据展现在一个可滚动的多行的列表中,可以将数据划分成不同的片段/组(sections/groups)。

列表有以下用途:

{% highlight html %}

视图列表

图标、标题和副标题
  • 商品名称
    杜蕾斯
  • 型号
    极致超薄型
标题和副标题
  • 商品名称
    杜蕾斯
  • 型号
    极致超薄型
带箭头
{% endhighlight %}

其中:

.item-content 上加上 .item-link 会增加一个向右的箭头。

联系人列表(Contacts List)

联系人列表用来展示个人的联系方式。

联系人列表是分组列表(Grouped Lists)的一个特殊的类型,主要有2点不同:

{% highlight html %}

联系人列表

  • A
  • 标题1
  • 标题2
  • 标题3
  • 标题4
  • 标题5
  • 标题6
  • 标题7
  • 标题8
  • B
  • 标题1
  • 标题2
  • 标题3
  • 标题4
  • 标题5
  • 标题6
  • C
  • 标题1
  • 标题2
  • 标题3
  • 标题4
  • 标题5
  • 标题6
  • 标题7
  • V
  • 标题1
{% endhighlight %}

多媒体列表(Media List View)

多媒体列表是列表(list view)的扩展,它是为了展示更复杂的数据比如产品,服务,用户等等。

当然,它的布局更为复杂:

{% highlight html %}

多媒体列表

曲目
邮件应用
简单列表
  • 标题
    子标题
嵌入式
{% endhighlight %}

其中:

可选择列表

列表可以支持单选和多选,我们只是修改了 checkboxradio 的样式,并没有进行任何JS操作。所以如果取数据,需要从其中隐藏的 input 元素中取,和原生的表单用法完全一样。

列表是单选还是多选,完全取决于 inputtype 属性设置。目前我们对单选和多选的图标样式是没有做区分的,后续可能会设置不同的样式以区分单选和多选。

{% highlight html %} {% endhighlight %}

因为选择操作是由原生的 input 实现的,所以只需要把上面的代码中的 input 元素的 type="radio" 改成 type="checkbox" 就可以变成多选。