支付宝小程序扩展组件列表元素·List-item

列表项。

扫码体验

示例代码

{
  "defaultTitle": "List",
  "usingComponents":{
    "list": "mini-ali-ui/es/list/index",
    "list-item": "mini-ali-ui/es/list/list-item/index"
  }
}

<list>
 <view slot="header">
   列表头部
 </view>
 <list-item thumb="http://thumb.link.png"
   arrow="{{true}}"
   onClick="onItemClick"
   upperSubtitle="上副标题"
   lowerSubtitle="下副标题" >
   主标题
   <view slot="extra">
     辅助信息
   </view>
 </list-item>
 <view slot="footer">
   列表尾部
 </view></list>

Page({
 onItemClick() {
   my.alert({
     content: '列表项点击事件'
   })
 }})

属性

属性	类型	默认值	必填	描述	最低版本
arrow	Boolean	true	-	是否启用箭头。	-
thumb	String	-	-	缩略图地址。	-
index	String	-	-	用于记录位置的 index，在事件回调中会将这个 index 回传。	-
borderRadius	Boolean	false	-	列表项是否圆角。	-
upperSubtitle	String	-	-	上副标题。	-
lowerSubtitle	String	-	-	下副标题。	-
titlePosition	String	top	-	主标题位置。可选值：top、middle、bottom。	-
thumbSize	String	40 px	有缩略图时必填	缩略图大小。有缩略图时必填。	-
onClick	Function	-	-	点击列表项事件。	-
last	Boolean	false	-	用于处理下划线是否显示。	1.1.0

slot

list-item 共有6个插槽，位置和名称如图表所示：

插槽名称	描述
supporting	列表头部插槽。
default	默认插槽，用于放置主标题。
afterTitle	主标题后面的插槽，可用于放置标签、图标。
afterUpperSubtitle	上副标题后面的插槽，可用于放置标签、图标。
afterLowerSubtitle	下副标题后面的插槽，可用于放置标签、图标。
extra	列表尾部插槽，用于放置辅助信息。

Tips & Bug

如要删除最后一个 list-item 的下划线，可以通过 list 长度判断，将最后一个 list-item 的 last 属性设为 true 即可。

支付宝小程序扩展组件 列表元素·List-item

扫码体验

示例代码

属性

slot

Tips & Bug

支付宝小程序扩展组件列表元素·List-item