container

示例

  1. <template>
  2.   <view class="container">
  3.     <scroller
  4.       height="{{-1}}"
  5.     >
  6.       <view class="title"><text >以下是demo</text></view>
  7.       <!-- 1 -->
  8.       <view class="container-wrap">
  9.         <container direction="column">
  10.           <head>
  11.             <view class="container-item">
  12.               <text>header</text>
  13.             </view>
  14.           </head>
  15.           <main main-style="{{mainStyle}}">
  16.             <view class="container-item">
  17.               <text>main</text>
  18.             </view>
  19.           </main>
  20.         </container>
  21.       </view>
  22.       <!-- 2 -->
  23.       <view class="container-wrap">
  24.         <container direction="column">
  25.           <head>
  26.             <view class="container-item">
  27.               <text>header</text>
  28.             </view>
  29.           </head>
  30.           <main main-style="{{mainStyle}}">
  31.             <view class="container-item">
  32.               <text>main</text>
  33.             </view>
  34.           </main>
  35.           <foot>
  36.             <view class="container-item">
  37.               <text>footer</text>
  38.             </view>
  39.           </foot>
  40.         </container>
  41.       </view>
  42.       <!-- 3 -->
  43.       <view class="container-wrap">
  44.         <container direction="row">
  45.           <aside aside-style="{{asideStyle}}">
  46.             <view class="container-item">
  47.               <text>aside</text>
  48.             </view>
  49.           </aside>
  50.           <main main-style="{{mainStyle}}" style="flex:1;">
  51.             <view class="container-item">
  52.               <text>main</text>
  53.             </view>
  54.           </main>
  55.         </container>
  56.       </view>
  57.       <!-- 4 -->
  58.       <view class="container-wrap">
  59.         <container direction="column">
  60.           <head>
  61.             <view class="container-item">
  62.               <text>header</text>
  63.             </view>
  64.           </head>
  65.           <container direction="row" style="flex:1;">
  66.             <aside aside-style="{{asideStyle}}">
  67.               <view class="container-item">
  68.                 <text>aside</text>
  69.               </view>
  70.             </aside>
  71.             <main main-style="{{mainStyle}}" style="flex:1;">
  72.               <view class="container-item">
  73.                 <text>main</text>
  74.               </view>
  75.             </main>
  76.           </container>
  77.         </container>
  78.       </view>
  79.       <!-- 5 -->
  80.       <view class="container-wrap">
  81.         <container direction="column">
  82.           <head>
  83.             <view class="container-item">
  84.               <text>header</text>
  85.             </view>
  86.           </head>
  87.           <container direction="row" style="flex:1;">
  88.             <aside aside-style="{{'height:380cpx'}}">
  89.               <view class="container-item">
  90.                 <text>aside</text>
  91.               </view>
  92.             </aside>
  93.             <container direction="column" style="flex:1">
  94.               <main main-style="{{mainStyle}}" style="flex:1;">
  95.                 <view class="container-item">
  96.                   <text>main</text>
  97.                 </view>
  98.               </main>
  99.               <foot>
  100.                 <view class="container-item">
  101.                   <text>foot</text>
  102.                 </view>
  103.               </foot>
  104.             </container>
  105.           </container>
  106.         </container>
  107.       </view>
  108.       <!-- 6 -->
  109.       <view class="container-wrap">
  110.         <container direction="row">
  111.           <aside aside-style="{{'height:380cpx'}}">
  112.             <view class="container-item">
  113.                 <text>aside</text>
  114.             </view>
  115.           </aside>
  116.           <container direction="column" style="flex:1;">
  117.             <head>
  118.               <view class="container-item">
  119.                   <text>header</text>
  120.                 </view>
  121.             </head>
  122.             <main main-style="{{mainStyle}}" style="flex:1;">
  123.               <view class="container-item">
  124.                   <text>main</text>
  125.               </view>
  126.             </main>
  127.           </container>
  128.         </container>
  129.       </view>
  130.       <!-- 7 -->
  131.       <view class="container-wrap">
  132.         <container direction="row">
  133.           <aside aside-style="{{'height:460cpx'}}">
  134.             <view class="container-item">
  135.                 <text>aside</text>
  136.             </view>
  137.           </aside>
  138.           <container direction="column" style="flex:1;">
  139.             <head>
  140.               <view class="container-item">
  141.                 <text>header</text>
  142.               </view>
  143.             </head>
  144.             <main main-style="{{mainStyle}}" style="flex:1;">
  145.               <view class="container-item">
  146.                   <text>main</text>
  147.               </view>
  148.             </main>
  149.             <foot>
  150.               <view class="container-item">
  151.                 <text>footer</text>
  152.               </view>
  153.             </foot>
  154.           </container>
  155.         </container>
  156.       </view>
  157.     </scroller>
  158.   </view>
  159. </template>
  160. <script>
  161. class CLayout {
  162.   data = {
  163.     headerTitle: 'layout布局',
  164.     headerDesc: 'layout布局',
  165.     asideStyle: 'height:300cpx;',
  166.     headStyle: '',
  167.     mainStyle: 'height:300cpx',
  168.     footStyle: ''
  169.   }
  170. }
  171. export default new CLayout();
  172. </script>
  173. <style scoped>
  174. .container-wrap{
  175.   padding-bottom:30cpx;
  176.   padding-left:15cpx;
  177.   padding-right:15cpx;
  178. }
  179. .container {
  180.   position: absolute;
  181.   top: 0;
  182.   left: 0;
  183.   right: 0;
  184.   bottom: 0;
  185. }
  186. .container-item{
  187.   flex:1;
  188.   display:flex;
  189.   flex-direction:row;
  190.   justify-content:center;
  191.   align-items:center;
  192.   font-size: 28cpx;
  193.   color: #333;
  194. }
  195. .title{
  196.   display:flex;
  197.   flex-direction:row;
  198.   justify-content:center;
  199.    line-height: 88cpx;
  200.   font-size: 28cpx;
  201.   text-align: center;
  202.   height: 88cpx;
  203.   color: #999;
  204. }
  205. </style>
  206. <script cml-type="json">
  207. {
  208.   "base": {}
  209. }
  210. </script>

container - 图1wx

container - 图2web

container - 图3native