drawerlayout

抽屉组件，会把内部的第一二个子元素作为侧边栏和主页，多出的元素不会加载

属性 作用
isOpen 控制打开关闭
方法 作用
toggel() 打开或关闭

事件

名称 触发时机
load 子元素加载完毕触发（注意：必须写在第一级子元素上）

Demo

  1. <template>
  2.     <div style="justify-content: center;align-items: center">
  3.         <div @click="setOpen" style="width: 100;height: 100;background-color: red">
  4.             <text>打开</text>
  5.         </div>
  6.         <div @click="setClose" style="width: 100;height: 100;background-color: red">
  7.             <text>关闭</text>
  8.         </div>
  10.         <drawerlayout
  11.                 style="width: 700;height: 800;background-color: chartreuse"
  12.                 :isOpen="open"
  13.                 :leftWidth="500"
  14.         >
  16.             <div @load="load" style="position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: red;width: 500">
  17.               <div style="flex: 1;background-color: #0085ee;justify-content: center;align-items: center">
  18.                      <text>侧边栏</text>
  19.                   <text>目前必须用2层div包裹才能保证填充满</text>
  20.                   <text>第一层的样式必须是position: absolute;left: 0;top: 0;right: 0;bottom: 0;</text>
  21.                   <text>第二层的样式必须是flex:1</text>
  22.                   <text>第一层div的宽度必须和leftWidth一致</text>
  23.               </div>
  24.             </div>
  25.             <div style="position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: red">
  26.                 <div style="flex: 1;background-color: #0085ee;justify-content: center;align-items: center">
  27.                     <text>主界面</text>
  28.                     <text>目前必须用2层div包裹才能保证填充满</text>
  29.                     <text>第一层的样式必须是position: absolute;left: 0;top: 0;right: 0;bottom: 0;</text>
  30.                     <text>第二层的样式必须是flex:1</text>
  31.                 </div>
  32.             </div>
  33.         </drawerlayout>
  35.     </div>
  36. </template>
  38. <style>
  39.     .cl {
  41.         align-items: center;
  43.     }
  46. </style>
  47. <style src="./style.css"></style>
  48. <script>
  50.     export default {
  51.         components: {},
  52.         data () {
  53.             return {
  54.                 back: "",
  55.                 header: {},
  56.                 open: false
  57.             }
  58.         },
  59.         methods: {
  60.             setOpen()
  61.             {
  62.               this.open=true;
  63.             },
  64.             setClose()
  65.             {
  66.                 this.open=false;
  67.             },
  68.             post()
  69.             {
  70.                 var self = this;
  71.                 self.back = "";
  72.                 const net = weex.requireModule('net');
  73.                 net.post('http://121.40.81.1:9080/edu/getBanners.do', {a: "1", b: "2"}, {}, function () {
  74.                     //start
  75.                 }, function (e) {
  76.                     //success
  77.                     self.back = e.res;
  78.                     self.header = r.headers;
  79.                 }, function (e) {
  80.                     //exception
  82.                 }, function () {
  83.                     //compelete
  84.                 });
  87.             },
  88.             get()
  89.             {
  92.                 var self = this;
  93.                 const net = weex.requireModule('net');
  94.                 self.back = "";
  95.                 net.get('http://121.40.81.1:9080/edu/getBanners.do', {}, {}, function () {
  96.                     //start
  97.                 }, function (e) {
  98.                     //success
  99.                     self.back = e.res;
  100.                 }, function (e) {
  101.                     //exception
  103.                 }, function () {
  104.                     //compelete
  105.                 });
  108.             }
  110.         },
  111.         created: function () {
  114.         }
  115.     }
  116. </script>