Panel 面板组件 1.0.2

面板组件，支持横向纵向滑动，以及下拉刷新和加载更多

继承自：Widget

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

panel

属性

scrollX { Boolean } #

X轴是否滚动，默认为false

scrollY { Boolean } #

Y轴是否滚动，默认为true

isTransition { Boolean } #

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

scrollLock { Boolean } #

当容器内的内容的高度小于容器高度时，是否允许滚动，默认为false

preventDefault { Boolean } #

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

stopPropagation { Boolean } #

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

canLockY { Boolean } #

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

resizable { Boolean } #

当浏览器窗口改变时是否可调整大小，默认为true

useRefresh { Boolean } #

是否启用刷新功能，默认为false，开启下来刷新组件

useLoadmore { Boolean } #

是否启用加载更多功能，默认为false，开启上拉加载更多

template { String } #

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

refreshTpl { String } #

刷新数据提示模板，需要自定义时修改

loadmoreTpl { String } #

家在更多时提示模板，需要自定义时修改

方法

render #

将组件渲染到document中

destroy #

销毁组件

resize #

重新计算滚动区域，容器高度发生变化后调用

simulateRefresh #

手动模拟刷新列表操作，组件滚动到头部

refresh #

刷新组件的HTML

方法参数:

参数名 类型 描述 必选 支持版本
html String 需要更新的html字符串
isFail Boolean 加载是否成功，如果加载数据碰到异常才设置成false，否则默认都为true

loadMore #

组件加载更多数据

方法参数:

参数名 类型 描述 必选 支持版本
data Array 加载到的数据
isFail Boolean 加载失败，如果加载数据碰到异常才设置成true

getPageNum #

获得当前组件的是第几页

返回值: Number 获得当前组件的是第几页

事件

{function} tap #

refresh #

用户下拉列表满足刷新条件时触发的事件

方法参数:

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

ready #

渲染完成后触发的事件

tap #

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

方法参数:

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

beforestart #

touchstart事件开始前触发的事件

方法参数:

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

beforemove #

touchmove事件开始前触发的事件

方法参数:

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

scrollEnd 1.0.2 #

滚动结束时触发的事件

aftermove #

touchmove事件结束后触发的事件,切换下拉刷新图标

方法参数:

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

beforeend #

touchend事件开始前触发的事件

方法参数:

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

onScroll #

列表滚动时触发的事件

方法参数:

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