codecamp

支付宝小程序扩展组件 列表次级信息元素·List-secondary

位于列表右侧的次级信息组件,用于列表项的 extra 插槽。

扫码体验

示例代码

{
 "defaultTitle": "List",
 "usingComponents":{
   "list": "mini-ali-ui/es/list/index",
   "list-item": "mini-ali-ui/es/list/list-item/index",
   "list-secondary": "mini-ali-ui/es/list/list-secondary/index"
 }
}
<list>
 <view slot="header">
   列表头部
 </view>
 <list-item thumb="http://thumb.link.png"
   arrow="{{true}}"
   onClick="onItemClick"
   upperSubtitle="上副标题"
   lowerSubtitle="下副标题" >
   主标题
   <list-secondary
     title="次级标题"
     subtitle="次级副标题"
     thumb="http://thumb.url.jpg"
     thumbSize="20"
     slot="extra" />
 </list-item>
 <view slot="footer">
   列表尾部
 </view>
</list>
Page({
 onItemClick() {
   my.alert({
     content: '列表项点击事件'
   })
 }
})

属性

属性 类型 描述
thumb String 缩略图地址。
title String 标题。
subtitle String 副标题。
thumbSize String 缩略图大小,建议手动设值。不设值时图片的高度会有一定的自适应能力,但不能保证跟文案内容高度完全一致。有缩略图时必填。

slot

list-item 共有6个插槽,位置和名称如下图所示。

image

list-secondary 用于放在 extra 插槽

请参见 list-item 组件。

支付宝小程序扩展组件 列表元素·List-item
支付宝小程序扩展组件 横向选项卡·Tabs
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

支付宝小程序开发文档

支付宝小程序 快速示例

支付宝小程序 小程序快速示例

支付宝小程序 框架

支付宝小程序 组件

支付宝小程序组件 基础组件

支付宝小程序组件 无障碍访问

支付宝小程序 扩展组件

支付宝小程序扩展组件 UI组件

支付宝小程序 API

支付宝小程序 开发工具

支付宝小程序 云服务

支付宝小程序 Serverless

关闭

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; }