DoubleList 双列表 1.0.0

双列表，类似于外卖的左右两列选菜列表，是通过组合两个pagelist来完成的。左侧为分类列表右侧为主列表

继承自：Widget

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

doublelist

属性

categoryListActiveClass { String } #

分类列表激活状态的样式

categoryListSelectedClass { String } #

分类列表选中后的样式

mainListActiveClass { String } #

主列表激活状态的样式

mainListSelectedClass { String } #

主列表选中后的样式

category { Array } #

左侧分类列表数据

key { String } #

分类数据与主列表数据关联字段，默认为null

selectFirst { Boolean } #

是否默认选中分类列表第一项，默认为true

preventDefault { Boolean } #

是否阻止浏览器默认事件，默认为true

resizable { Boolean } #

窗口大小改变时，是否重新调节大小，默认为true

pagesize { Number } #

主列表一页显示的条目树，默认为15

useRefresh { Boolean } #

是否允许下拉刷新，默认为false

useLoadmore { Boolean } #

是否允许下拉加载更多，默认为false

infinite { Boolean } #

主列表是否加载大量数据，默认为false

imgLazyLoad { Boolean } #

主列表图片是否延迟加载，默认为false

template { String } #

组件模板，需要自定义时修改

categoryListTpl { String } #

分类列表模板，需要自定义时修改

categoryItemTpl { String } #

分类列表项模板，需要自定义时修改

mainListTpl { String } #

主列表模板，需要自定义时修改

mainItemTpl { String } #

主列表项模板，需要自定义时修改

方法

render #

将组件渲染到document中

reloadMainList #

重新加载主列表的数据

方法参数:

参数名 类型 描述 必选 支持版本
data Array 主列表重新加载的数据

resize #

根据窗口大小重新调整组件位置和大小

事件

selectcategory #

选择左侧分类列表时触发的事件

方法参数:

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

selectmain #

选择右侧主列表时触发的事件

方法参数:

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

refresh #

下拉刷新时触发的事件

方法参数:

参数名 类型 描述 必选 支持版本
pageNum Number 当前的页码

loadmore #

加载更多时触发的事件

方法参数:

参数名 类型 描述 必选 支持版本
pageNum Number 当前的页码