閱讀(4.8k) 書簽贊(0) 我要糾錯

快應用 list組件

2020-08-10 11:19 更新

概述

列表視圖容器

子組件

僅支持?<list-item>?

屬性

支持通用屬性

名稱	類型	默認值	必填	描述
scrollpage	boolean	false	否	是否將 list 頂部頁面中非 list 部分隨 list 一起滑出可視區(qū)域，開啟該屬性會降低 list 渲染性能

樣式

支持通用樣式

名稱	類型	默認值	必填	描述
flex-direction	column \| row \| column-reverse `1040+` \| row-reverse `1040+`	column	否	設置列表的滾動以及子元素的排列方向
columns	number	1	否	list 顯示列數(shù)
layout-type `1070+`	string	grid	否	grid：網(wǎng)格展示 stagger：交錯顯示(瀑布流展示)，該模式下，可自定義各個 list-item 的高度

事件

名稱	參數(shù)	描述
scroll	{scrollX:scrollXValue, scrollY:scrollYValue, scrollState:stateValue `1010+`}	列表滑動 stateValue 說明: 0： list 停止滑動 1： list 正在通過用戶的手勢滑動 2： list 正在滑動，用戶已松手
scrollbottom	-	列表滑動到底部
scrolltop	-	列表滑動到頂部
scrollend `1040+`	-	列表滑動結(jié)束
scrolltouchup `1040+`	-	列表滑動過程中手指抬起

方法

名稱	參數(shù)	描述
scrollTo	Object	list 滾動到指定 item 位置
scrollBy `1070+`	Object	使 list 的內(nèi)容滑動一定距離

scrollTo 的參數(shù)說明:

名稱	類型	是否必選	默認值	備注
index	number	否	0	list 滾動的目標 item 位置
smooth `deprecated`	boolean	否	false	是否平滑滾動，值為 false 時表示直接滾動到指定位置，值為 true 時表示平滑滾動到指定位置
behavior `1070+`	smooth \| instant \| auto	否	auto	是否平滑滑動，支持參數(shù) smooth (平滑滾動)，instant (瞬間滾動)，默認值 auto，效果等同于 instant

scrollBy 的參數(shù)說明:

名稱	類型	是否必選	默認值	備注
left	number	否	0	從當前位置水平方向滑動距離，單位 px。值為正時向左滑動，為負時向右滑動。flex-direction 為 column 或 column-reverse 時不生效
top	number	否	0	從當前位置垂直方向滑動距離，單位 px。值為正時向上滑動，為負時向下滑動。flex-direction 為 row 或 row-reverse 時不生效
behavior	smooth \| instant \| auto	否	auto	是否平滑滑動，支持參數(shù) smooth (平滑滾動)，instant (瞬間滾動)，默認值 auto，效果等同于 instant

list 示例代碼

查看示例代碼

延伸閱讀

正確使用和優(yōu)化組件 list，參見 list 教程

以上內(nèi)容是否對您有幫助：

← 快應用 div組件

快應用 list-item組件 →

寫筆記

我要補充