List 列表 1.0.2

列表基类，只支持纵向滑动

继承自：Widget

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

list

属性

isTransition { Boolean } #

动画的效果，默认为true使用transition,

activeClass { String } #

激活状态的样式

preventDefault { Boolean } #

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

stopPropagation { Boolean } #

阻止touch事件冒泡，默认为false

resizable { Boolean } #

可调整大小，默认为true

canLockY { Boolean } #

是否支持锁定Y轴滚动，默认为false， 在与slidermenu的配合使用时，需要设置为true

template { String } #

模板文件，自定义模板时需要传。

必须含有 data-role属性，其中：

  • data-role="scroller" 指组件的滚动容器
  • data-role="itemWrap" 指组件的列表容器, itemTpl解析后会放到这里
  • data-role="nodata" 指组件没有数据时的容器，nodataTpl解析后会放到这里

itemTpl { String } #

列表项的模板，自定义模板时需要传。必须含有data-role="list-item"属性。

datasource { Array } #

组件的数据源，数组类型，每个数组项为object

方法

render #

将组件渲染到document中

destroy #

销毁组件

resize #

容器高度发生变化后的处理

reload #

重新加载列表数据

方法参数:

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

getOrientation #

获取滚动方向

resetPosition #

滑动超出最大范围，回弹到终点

事件

tap #

用户点击某项数据时触发的事件

方法参数:

参数名 类型 描述 必选 支持版本
e HTMLEvent touch事件的事件对象

selectitem #

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

方法参数:

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

beforestart #

touchstart事件开始前触发的事件

方法参数:

参数名 类型 描述 必选 支持版本
e HTMLEvent touch事件的事件对象

beforemove #

touchmove事件开始前触发的事件

方法参数:

参数名 类型 描述 必选 支持版本
e HTMLEvent touch事件的事件对象

beforeend #

touchend事件开始前触发的事件

方法参数:

参数名 类型 描述 必选 支持版本
e HTMLEvent touch事件的事件对象

aftermove #

touchmove事件结束后触发的事件

方法参数:

参数名 类型 描述 必选 支持版本
translateY Number 滚动偏移的translateY

#

列表滚动时触发的事件

方法参数:

参数名 类型 描述 必选 支持版本
translateY Number 滚动偏移的translateY
stopAnimate Boolean 是否停止动画