列表 #

列表 #

列表是一个将第一个子项根据数据重复绘制多次的组件

点击列表进入二级菜单，拖拽不同的列表到你想要的位置。 列表包括: 普通列表和带导航的列表。

基本设置 #

同文本

列表设置 #

• 每行子项个数: 列表每行有几个
• 子项高度：每个子项高度，超出部分会被隐藏
• 子项横向纵向留白：列表和子项之间的留白
• 数据源 见下文
• 数据源Map 见下文

相当于是普通列表 + 导航 的设置

子项编辑模式 #

列表这类复杂组件，可进入子项编辑模式（按钮位于组件右上方），在该模式下可以添加，选中修改，和删除子组件。 列表是一个将第一个子项根据数据重复绘制多次的组件，所以只能编辑第一项

数据源及map #

如上文，列表是一个将第一个子项根据数据重复绘制多次的组件，数据源及其map决定了每项列表根据什么来渲染，您需要先增加一个符合格式的数据源，然后使用数据源map将组件和列表子项组件联系起来，即可得到一个根据数据绘制的列表。

其中，数据源map中的子项链接字段，可以link一个url，这样点击子项的时候，会跳转到对应的url上去。

数据源格式 #

数据源可以是一个接口，也可以一个JSON静态数据。但都需要满足以下格式。

普通列表

{
  "data": [
    {
      "title": "列表项一标题",
      "subtitle": "列表副标题",
      "info": "详情详情详情详情详情详情详情详情详情详情",
      "img": "http://s.qunarzz.com/yshow/img/default-image.png",
      "url": "http://ued.qunar.com/"
    }
  ]
}

导航列表

{
  "data": [
    {
      "name": "导航一",
      "content": [
        {
          "name": "列表一Item1",
          "tag": "推荐1",
          "img": "http://s.qunarzz.com/yshow/img/default-image.png",
          "price": "100",
          "url": "https://ued.qunar.com"
        },
        {
          "name": "列表一Item2",
          "tag": "推荐2",
          "img": "http://s.qunarzz.com/yshow/img/default-image.png",
          "price": "200",
          "url": "https://ued.qunar.com"
        }
      ]
    }
  ]
}