Grouplist 分组列表 1.1.0

继承自：List

查看示例：Demo (PC需开启模拟器)

grouplist

属性

groupBy { String } #

根据数据中的哪个字段分组进行分组，必填

notgroupData { Array } #

没有分组的数据，默认展示在顶部

previousData { Array } #

前置分组的数据，在未分组数据和分组数据之间

isTransition { Boolean } #

默认滚动的动画效果，默认为false，true使用css的transition，false使用js动画

lazyload { Boolean } #

是否延迟加载数据，默认为false，开启后先加载20条，然后在加载其余数据

template { String } #

组件的外层模板，自定义模板时，需要传值

itemTpl { String } #

组件分组数据模板，自定义模板时，需要传值

stickyTpl { String } #

磁贴字母模板

hasIndexList { Boolean } #

是否显示右侧字母索引列表，默认为true

indexlistTpl { String } #

右侧索引字母模板

infinite { Boolean } 1.1.0 #

是否开启无限滚动模式，默认为false，false是append节点，true会有固定个数的节点，滚动的时候移动节点和更新数据

itemHeight { Number } 1.1.0 #

开启 infinite 时的每一项高度

titleHeight { Number } 1.1.0 #

开启 infinite 时的 group title 高度

groupTitleRender { Function } #

渲染分组数据title的渲染函数，默认取第一个字符

template { String } #

组件的外层模板，必须含有 data-role属性，其中：

  • data-role="scroller" 指组件的滚动容器,
  • data-role="itemWrap" 指组件的列表容器,itemTpl解析后会放到这里
<div class="yo-group">
   <div class="scroll-wrap" data-role="scroller">
       <ul class="yo-list" data-role="itemwrap"></ul>
     </div>
 </div>

itemTpl { String } #

列表选项的模板，必须含有 data-role属性，其中：

  • data-role="list-item" 指组件某一项的容器
  • data-role="title" 指每一组的title的容器
{{#if data.isLetter}}
   <li class="label" data-role="title">{{data.text}}</li>
 {{#else}}
   <li class="item" data-role="list-item"
        {{#if data.preIndex}}
             pre-index={{data.preIndex}}
       {{#else if data.notgroupIndex}}
             notgroup-index={{data.notgroupIndex}}
         {{#else}}
             data-index={{data.dataIndex}}
         {{/if}}
        {{#if data.flag}}
             item-flag={{data.flag}}
         {{/if}}
     >{{data.text}}</li>
 {{/if}}
方法

render #

将组件渲染到document中

destroy #

销毁组件

事件

selectitem #

用户选择某项数据时触发的事件

方法参数:

参数名 类型 描述 必选 支持版本
data Object 当前选择项目的数据
itemEl HTMLElement 当前选择项目的节点
targetEl HTMLElement 用户点击的实际节点