container

属性

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

main

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

head

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

foot

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

aside

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

示例

  1. <template>
  2.   <view>
  3.     <scroller
  4.       height="{{-1}}"
  5.     >
  6.       <view>
  7.         <container direction="column">
  8.           <head>
  9.             <view>
  10.               <text>header</text>
  11.             </view>
  12.           </head>
  13.           <main>
  14.             <view>
  15.               <text>main</text>
  16.             </view>
  17.           </main>
  18.         </container>
  19.       </view>
  20.       <!-- 2 -->
  21.       <view >
  22.         <container direction="column">
  23.           <head>
  24.             <view>
  25.               <text>header</text>
  26.             </view>
  27.           </head>
  28.           <main>
  29.             <view>
  30.               <text>main</text>
  31.             </view>
  32.           </main>
  33.           <foot>
  34.             <view>
  35.               <text>footer</text>
  36.             </view>
  37.           </foot>
  38.         </container>
  39.       </view>
  40.       <!-- 3 -->
  41.       <view>
  42.         <container direction="row">
  43.           <aside>
  44.             <view>
  45.               <text>aside</text>
  46.             </view>
  47.           </aside>
  48.           <main style="flex:1;">
  49.             <view>
  50.               <text>main</text>
  51.             </view>
  52.           </main>
  53.         </container>
  54.       </view>
  55.       <!-- 4 -->
  56.       <view>
  57.         <container direction="column">
  58.           <head>
  59.             <view>
  60.               <text>header</text>
  61.             </view>
  62.           </head>
  63.           <container direction="row" style="flex:1;">
  64.             <aside>
  65.               <view>
  66.                 <text>aside</text>
  67.               </view>
  68.             </aside>
  69.             <main style="flex:1;">
  70.               <view>
  71.                 <text>main</text>
  72.               </view>
  73.             </main>
  74.           </container>
  75.         </container>
  76.       </view>
  77.       <!-- 5 -->
  78.       <view>
  79.         <container direction="column">
  80.           <head>
  81.             <view>
  82.               <text>header</text>
  83.             </view>
  84.           </head>
  85.           <container direction="row" style="flex:1;">
  86.             <aside>
  87.               <view>
  88.                 <text>aside</text>
  89.               </view>
  90.             </aside>
  91.             <container direction="column" style="flex:1">
  92.               <main style="flex:1;">
  93.                 <view>
  94.                   <text>main</text>
  95.                 </view>
  96.               </main>
  97.               <foot>
  98.                 <view>
  99.                   <text>foot</text>
  100.                 </view>
  101.               </foot>
  102.             </container>
  103.           </container>
  104.         </container>
  105.       </view>
  106.       <!-- 6 -->
  107.       <view class="container-wrap">
  108.         <container direction="row">
  109.           <aside>
  110.             <view>
  111.                 <text>aside</text>
  112.             </view>
  113.           </aside>
  114.           <container direction="column" style="flex:1;">
  115.             <head>
  116.               <view>
  117.                   <text>header</text>
  118.                 </view>
  119.             </head>
  120.             <main style="flex:1;">
  121.               <view>
  122.                   <text>main</text>
  123.               </view>
  124.             </main>
  125.           </container>
  126.         </container>
  127.       </view>
  128.       <!-- 7 -->
  129.       <view>
  130.         <container direction="row">
  131.           <aside>
  132.             <view>
  133.                 <text>aside</text>
  134.             </view>
  135.           </aside>
  136.           <container direction="column" style="flex:1;">
  137.             <head>
  138.               <view>
  139.                 <text>header</text>
  140.               </view>
  141.             </head>
  142.             <main style="flex:1;">
  143.               <view>
  144.                   <text>main</text>
  145.               </view>
  146.             </main>
  147.             <foot>
  148.               <view>
  149.                 <text>footer</text>
  150.               </view>
  151.             </foot>
  152.           </container>
  153.         </container>
  154.       </view>
  155.     </scroller>
  156.   </view>
  157. </template>
  158. <script>
  159. class CLayout {
  160. }
  161. export default new CLayout();
  162. </script>
  163. <script cml-type="json">
  164. {
  165.   "base": {}
  166. }
  167. </script>

container - 图1wx

container - 图2web

container - 图3native

查看完整示例