支付宝小程序扩展组件 模块标题·Title
页面内每个容器模块中的标题模块。
扫码体验
示例代码
{
"defaultTitle": "title",
"usingComponents": {
"title": "mini-ali-ui/es/title/index"
}
<title
hasLine="true"
type="more"
onActionTap="titleMore"
>内部标题无 icon 展开气泡菜单</title>
<title
hasLine="true"
iconURL="https://t.alipayobjects.com/images/T1HHFgXXVeXXXXXXXX.png"
type="close"
onActionTap="titleClose"
>内部标题可关闭</title>
<title
hasLine="true"
className="changeColor"
iconURL="https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original"
type="arrow"
onActionTap="titleGo"
>使用class修改样式</title>.changeColor {
font-size: 30px;
color: #f32600;
}Page({
data: {},
onLoad() {},
titleGo() {
my.showToast({
content: '点击箭头，可设置跳转',
});
},
titleMore() {
my.showToast({
content: '点击更多，展开气泡菜单',
});
},
titleClose() {
my.showToast({
content: '点击关闭，可设置关闭',
});
},
});属性
| 属性 | 类型 | 默认值 | 描述 | 最低版本 |
|---|---|---|---|---|
| className | String | - | 自定义class。 | - |
| hasLine | Boolean | false | 是否有下划线。 | - |
| iconURL | String | - | 标题旁边的 icon URL。默认以背景图的方式展示在一个正方形的元素中。 | - |
| type | String | - | 标题可操作区域类型，默认为空（如 type 为空，onActionTap 无效）。 arrow：箭头；close：关闭；more：更多；custom：自定义内容，需要传递名为 operation 的具名插槽；默认为空。 | custom 需要 1.1.3 版本支持 |
| onActionTap | EventHandle | () => {} | type 属性有具体值时可点击事件。 | - |