container

属性

属性名 类型 必填 默认值 说明
direction String 否 'row' container内布局组件的排列方式，默认是水平（row),可取值为 'row'或者 'column'

main

属性名 类型 必填 默认值 说明
main-style String 否 '' 容器的样式

head

属性名 类型 必填 默认值 说明
head-style String 否 '' 容器的样式

foot

属性名 类型 必填 默认值 说明
foot-style String 否 '' 容器的样式

aside

属性名 类型 必填 默认值 说明
aside-style String 否 '' 容器的样式

示例

<template>
  <view>
    <scroller
      height="{{-1}}"
    >
      <view>
        <container direction="column">
          <head>
            <view>
              <text>header</text>
            </view>
          </head>
          <main>
            <view>
              <text>main</text>
            </view>
          </main>
        </container>
      </view>
      <!-- 2 -->
      <view >
        <container direction="column">
          <head>
            <view>
              <text>header</text>
            </view>
          </head>
          <main>
            <view>
              <text>main</text>
            </view>
          </main>
          <foot>
            <view>
              <text>footer</text>
            </view>
          </foot>
        </container>
      </view>
      <!-- 3 -->
      <view>
        <container direction="row">
          <aside>
            <view>
              <text>aside</text>
            </view>
          </aside>
          <main style="flex:1;">
            <view>
              <text>main</text>
            </view>
          </main>
        </container>
      </view>
      <!-- 4 -->
      <view>
        <container direction="column">
          <head>
            <view>
              <text>header</text>
            </view>
          </head>
          <container direction="row" style="flex:1;">
            <aside>
              <view>
                <text>aside</text>
              </view>
            </aside>
            <main style="flex:1;">
              <view>
                <text>main</text>
              </view>
            </main>
          </container>
        </container>
      </view>
      <!-- 5 -->
      <view>
        <container direction="column">
          <head>
            <view>
              <text>header</text>
            </view>
          </head>
          <container direction="row" style="flex:1;">
            <aside>
              <view>
                <text>aside</text>
              </view>
            </aside>
            <container direction="column" style="flex:1">
              <main style="flex:1;">
                <view>
                  <text>main</text>
                </view>
              </main>
              <foot>
                <view>
                  <text>foot</text>
                </view>
              </foot>
            </container>
          </container>
        </container>
      </view>
      <!-- 6 -->
      <view class="container-wrap">
        <container direction="row">
          <aside>
            <view>
                <text>aside</text>
            </view>
          </aside>
          <container direction="column" style="flex:1;">
            <head>
              <view>
                  <text>header</text>
                </view>
            </head>
            <main style="flex:1;">
              <view>
                  <text>main</text>
              </view>
            </main>
          </container>
        </container>
      </view>
      <!-- 7 -->
      <view>
        <container direction="row">
          <aside>
            <view>
                <text>aside</text>
            </view>
          </aside>
          <container direction="column" style="flex:1;">
            <head>
              <view>
                <text>header</text>
              </view>
            </head>
            <main style="flex:1;">
              <view>
                  <text>main</text>
              </view>
            </main>
            <foot>
              <view>
                <text>footer</text>
              </view>
            </foot>
          </container>
        </container>
      </view>
    </scroller>
  </view>
</template>
<script>
class CLayout {
}
export default new CLayout();
</script>
<script cml-type="json">
{
  "base": {}
}
</script>
wx
web
native

查看完整示例

results matching ""

    No results matching ""