如何设置容器Container_移动开发平台 mPaaS(mPaaS)-阿里云帮助中心

通用卡片容器，可承载文字、列表、图片、段落等，便于用户浏览内容。

属性

属性	类型	必填	默认值	说明
title	string	否	-	标题
image	string	否	-	缩略图 url
icon	string	否	-	右侧图标
className	string	否	-	类名

事件

事件名	说明	类型
onIconTap	点击右上角图标执行回调操作。	`() => void`

插槽

插槽名称	说明
title	组件标题插槽，当 title 属性存在时，插槽不生效。

样式类

类名	说明
amd-container	整体样式
amd-container-header	标题栏整体样式
amd-container-header-image	标题栏图片样式
amd-container-header-title	标题栏标题样式
amd-container-header-icon	标题栏 Icon 样式
amd-container-content	内容样式

代码示例

基本使用

index.axml 的代码示例如下：

<view class="demo-container">
  <container
    title="基础用法"
    image="{{imageUrl}}"
    icon="SetOutline"
    onIconTap="onIconTap"
  >
    <view class="demo-container-container">
      这是 container 自定义内容
    </view>
  </container>
</view>

index.js 的代码示例如下：

Page({
  data: {
    imageUrl: 'https://gw.alipayobjects.com/mdn/rms_226d75/afts/img/A*06fDQa9nxDkAAAAAAAAAAAAAARQnAQ'
  },
  onIconTap() {
    my.alert({
      title: 'icon onTap',
      content: '你点击了右上角图标！'
    })
  }
});

index.acss 的代码示例如下：

.demo-container {
  padding-top: 24rpx;
}

.demo-container-container {
  padding: 24rpx;
}

index.json 的代码示例如下：

{
  "defaultTitle": "Container",
  "usingComponents": {
    "container": "antd-mini/es/Container/index"
  }
}