view

视图容器。

示例

  1. <template>
  2.   <view class="page-demo">
  3.     <scroller
  4.       height="{{-1}}"
  5.     >
  6.       <view class="page-box">
  7.         <view class="page-section">
  8.           <view class="page-section-title"><text>flex-direction: row</text></view>
  9.           <view class="page-section-content" style="flex-direction: row">
  10.             <view class="flex-item demo-1"><text>I</text></view>
  11.             <view class="flex-item demo-2"><text>II</text></view>
  12.             <view class="flex-item demo-3"><text>III</text></view>
  13.           </view>
  14.         </view>
  15.         <view class="page-section">
  16.           <view class="page-section-title"><text>flex-direction: column</text></view>
  17.           <view class="page-section-content" style="flex-direction: column">
  18.             <view class="flex-item-V demo-1"><text>I</text></view>
  19.             <view class="flex-item-V demo-2"><text>II</text></view>
  20.             <view class="flex-item-V demo-3"><text>III</text></view>
  21.           </view>
  22.         </view>
  23.       </view>
  24.     </scroller>
  25.   </view>
  26. </template>
  27. <script>
  28. class View {
  29.   data = {
  30.   }
  31. }
  32. export default new View();
  33. </script>
  34. <style scoped>
  35. .page-demo {
  36.   background: #FAFAFA;
  37.   position: absolute;
  38.   top:0;
  39.   bottom:0;
  40.   left:0;
  41.   right:0;
  42. }
  43. .page-box {
  44.   margin-top: 80cpx;
  45. }
  46. .page-section-title {
  47.   font-size: 32cpx;
  48.   margin: 0 30cpx;
  49. }
  50. .page-section-content {
  51.   margin: 80cpx;
  52.   display: flex;
  53.   font-size: 32cpx;
  54.   text-align: center;
  55.   justify-content: center;
  56.   align-items: center;
  57. }
  58. .flex-item {
  59.   width: 200cpx;
  60.   height: 300cpx;
  61.   line-height: 300cpx;
  62.   justify-content: center;
  63.   align-items: center;
  64. }
  65. .flex-item-V {
  66.   width: 300cpx;
  67.   height: 200cpx;
  68.   line-height: 200cpx;
  69.   justify-content: center;
  70.   align-items: center;
  71. }
  72. .demo-1 {
  73.   background-color: #81c0c0;
  74. }
  75. .demo-2 {
  76.   background-color: #97cbff;
  77. }
  78. .demo-3 {
  79.   background-color: #e0e0e0;
  80. }
  81. </style>
  82. <script cml-type="json">
  83. {
  84.   "base": {}
  85. }
  86. </script>