codecamp

快应用 list-item组件

概述

<list>​的子组件,用来展示列表具体 item,宽度默认充满 list 组件

子组件

支持

属性

支持 通用属性

名称 类型 默认值 必填 描述
type <string> - list-item 类型,值为自定义的字符串,如'loadMore'。相同的 type 的 list-item 必须具备完全一致的 DOM 结构。因此,在 list-item 内部需谨慎使用 if 和 for,因为 if 和 for 可能造成相同的 type 的 list-item 的 DOM 结构不一致,从而引发错误

样式

支持​<div> 样式

不支持 position 样式,支持通用样式

名称 类型 默认值 必填 描述
column-span <number> 1 list-item 在 list 中所占列数,一般用于 list 多列显示时。

注:

正常情况下,​list-item​的​column-span​数值应小于等于其父组件​list​的​columns​数值,请开发者留意

1070 版本开始,list 组件支持配置样式​layout-type​,可选属性值:​stagger​、​grid(默认)

  • 当​layout-type​为​stagger​时:若​list-item​的​column-span​数值等于其父组件​list​的​columns​数值,表示占满所有列;否则,list-item 组件将表现为​column-span: 1​的样式
  • 当没有指定layout-typelayout-typegrid时:若list-itemcolumn-span数值小于等于其父组件listcolumns数值,则表现为占有column-span列宽度的样式;否则,list-item 组件将表现为column-span: 1的样式

事件

支持 通用事件

list-item 示例代码

查看 示例代码

延伸阅读

正确使用组件 list-item,参见 list 教程



快应用 list组件
快应用 popup组件
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

快应用 参考手册

快应用 安全

快应用 声音音频

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }