教程 框架 组件 接口 工具 其他

list

概述

列表视图容器

子组件

仅支持<list-item>

属性

支持通用属性

名称类型默认值必填描述
scrollpagebooleanfalse是否将 list 顶部页面中非 list 部分随 list 一起滑出可视区域,开启该属性会降低 list 渲染性能

样式

支持通用样式

名称类型默认值必填描述
flex-directioncolumn | row | column-reverse 1040+ | row-reverse 1040+column设置列表的滚动以及子元素的排列方向
columnsnumber1list 显示列数
layout-type 1070+stringgridgrid:网格展示
stagger:交错显示(瀑布流展示),该模式下,可自定义各个 list-item 的高度

事件

名称参数描述
scroll{scrollX:scrollXValue, scrollY:scrollYValue, scrollState:stateValue 1010+}列表滑动
stateValue 说明:
0: list 停止滑动
1: list 正在通过用户的手势滑动
2: list 正在滑动,用户已松手
scrollbottom-列表滑动到底部
scrolltop-列表滑动到顶部
scrollend 1040+-列表滑动结束
scrolltouchup 1040+-列表滑动过程中手指抬起

方法

名称参数描述
scrollToObjectlist 滚动到指定 item 位置
scrollBy 1070+Object使 list 的内容滑动一定距离

scrollTo 的参数说明:

名称类型是否必选默认值备注
indexnumber0list 滚动的目标 item 位置
smooth deprecatedbooleanfalse是否平滑滚动,值为 false 时表示直接滚动到指定位置,值为 true 时表示平滑滚动到指定位置
behavior 1070+smooth | instant | autoauto是否平滑滑动,支持参数 smooth (平滑滚动),instant (瞬间滚动),默认值 auto,效果等同于 instant

scrollBy 的参数说明:

名称类型是否必选默认值备注
leftnumber0从当前位置水平方向滑动距离,单位 px。值为正时向左滑动,为负时向右滑动。flex-direction 为 column 或 column-reverse 时不生效
topnumber0从当前位置垂直方向滑动距离,单位 px。值为正时向上滑动,为负时向下滑动。flex-direction 为 row 或 row-reverse 时不生效
behaviorsmooth | instant | autoauto是否平滑滑动,支持参数 smooth (平滑滚动),instant (瞬间滚动),默认值 auto,效果等同于 instant

list   示例代码

查看示例代码

查看瀑布流示例代码

延伸阅读

正确使用和优化组件 list,参见list 教程

条匹配 "" 的结果

    没有搜索到与 "" 相关的内容