codecamp

支付宝小程序扩展组件 容器·Container

容器依据最佳实践统一了子元素的间距、圆角。

扫码体验

示例代码

{
 "defaultTitle": "Container",
 "usingComponents": {
   "container": "mini-ali-ui/es/container/index",
   "title": "mini-ali-ui/es/title/index"
 }
}
<view className="container">
 <container className="container-item">
   <view class="item">a1</view>
 </container>
 <container className="container-item">
   <view class="item">b1</view>
   <view class="item">b2</view>
 </container>
 <container className="container-item">
   <title slot="header" hasLine="true" showIcon="true" iconURL="https://gw.alipayobjects.com/mdn/miniProgram_mendian/afts/img/A*wiFYTo5I0m8AAAAAAAAAAABjAQAAAQ/original">内部标题无操作</title>
   <view class="item">c1</view>
   <view class="item">c2</view>
   <view class="item">c3</view>
   <view slot="footer" class="footer" style="padding-left: 12px;">底部展示区</view>
 </container>
 <container className="container-item">
   <title slot="header">滑动</title>
   <swiper indicator-dots="{{true}}" class="item">
     <block a:for="{{['#0abc80','#00b7f4']}}">
       <swiper-item>
         <view style="background-color: {{item}};width:100%;height:300rpx;border-radius:16rpx;"/>
       </swiper-item>
     </block>
   </swiper>
 </container>
 <container className="container-item" type="onewithtwo">
   <view class="grid-item" style ="height: 300rpx;" slot="first">first</view>
   <view class="grid-item" slot="second">second</view>
   <view class="grid-item" slot="third">third</view>
 </container>
</view>
.container {
 background: #F5F5F5;
 padding: 24rpx;
 height: 100%;
}
.container-item {
 margin-bottom: 24rpx;
}
.footer {
 color: #333;
 margin-top: 24rpx;
}
.item {
 background: #eeeeee;
 text-align: center;
 height: 200rpx;
}
.grid-item {
 background: #eeeeee;
 text-align: center;
}

属性

属性 类型 默认值 描述
type string line 容器排版类型。可选值:line(一行)、onewithtwo(一行两列)。type 为 line 时会等分所有子元素。
className String - 自定义样式名。
支付宝小程序扩展组件 UI组件
支付宝小程序扩展组件 模块标题·Title
温馨提示
下载编程狮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; }