快應(yīng)用 list組件

2020-08-10 11:19 更新

概述

列表視圖容器

子組件

僅支持?<list-item>?

屬性

支持 通用屬性

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

樣式

支持 通用樣式

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

事件

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

方法

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

scrollTo 的參數(shù)說明:

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

scrollBy 的參數(shù)說明:

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

list   示例代碼

查看 示例代碼

延伸閱讀

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


以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)