layout-con 自适应双容器
更新时间:2023-06-20
一、单双容器切换组件
layout-con 单双容器切换组件,根据当前页面的宽度自动适应是单容器布局还是双容器布局。
二、属性说明
| 属性名 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| class-name | String | 无 | 否 | 容器类名 |
| left-class-name | String | 无 | 否 | 左容器类名 |
| right-class-name | String | 无 | 否 | 右容器类名 |
| layout-single-class-name | String | 无 | 否 | 当为单容器时类名 |
| minWidth | Number | 1720 | 否 | 单双容器的切换的临界点 |
| layoutRightVoice | String | 无 | 否 | 右侧容器语音类型 |
| layoutLeftVoice | String | scroll-vertical | 否 | 左侧容器语音类型 |
| bindlayoutRightLower | EventHandle | 无 | 否 | 右侧容易加载更多回调(同时应用于单容器) |
| bindscroll | EventHandle | 无 | 否 | 容器滚动事件,name区分滚动容器 |
三、slot
| 名称 | 说明 |
|---|---|
| left | 左侧内容 |
| right | 右侧内容 |
四、示例
swan:
<layout-con layout-single-class-name="layout-single">
<view slot="left" class="left-con">
<text>左侧内容</text>
</view>
<view slot="right" class="right-con">
<text>右侧内容</text>
</view>
</layout-con>css:
.left-con {
height: 100%;
}
.right-con {
height: 100%;
}
.layout-single .left-con, .layout-single .right-con{
height: auto;
overflow: hidden;
}josn:
{
"navigationBarTitleText": "单双容器组件",
"usingComponents": {
"layout-con": "iov-ui/lib/layout-con"
}
}