host

一个多页面隐藏切换的组件，比如tab组件，会把内部的元素作为子页面，子页面填充满

属性 作用
page 当前显示那一页

事件

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

Demo

  1. <template>
  2.     <div style="flex: 1;background-color: #ffffff">
  4.         <host style="flex: 1"   @change="onchange" :page="index">
  5.             <!--<child style="background-color: red;display: flex">-->
  6.             <div @load="load" @show="show" style="position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: red;">
  7.                 <div style="flex: 1;background-color: #0085ee;justify-content: center;align-items: center">
  8.                     <text style="font-size: 55">页面1</text>
  9.                     <text>目前必须用2层div包裹才能保证填充满</text>
  10.                     <text>第一层的样式必须是position: absolute;left: 0;top: 0;right: 0;bottom: 0;</text>
  11.                     <text>第二层的样式必须是flex:1</text>
  12.                 </div>
  13.             </div>
  14.             <div  style="position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: red;">
  15.                 <div style="flex: 1;background-color: #0085ee;justify-content: center;align-items: center">
  16.                     <text style="font-size: 55">页面2</text>
  17.                     <text>目前必须用2层div包裹才能保证填充满</text>
  18.                     <text>第一层的样式必须是position: absolute;left: 0;top: 0;right: 0;bottom: 0;</text>
  19.                     <text>第二层的样式必须是flex:1</text>
  20.                 </div>
  21.             </div>
  22.             <div style="position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: red;">
  23.                 <div style="flex: 1;background-color: #0085ee;justify-content: center;align-items: center">
  24.                     <text style="font-size: 55">页面3</text>
  25.                     <text>目前必须用2层div包裹才能保证填充满</text>
  26.                     <text>第一层的样式必须是position: absolute;left: 0;top: 0;right: 0;bottom: 0;</text>
  27.                     <text>第二层的样式必须是flex:1</text>
  28.                 </div>
  29.             </div>
  30.             <div style="position: absolute;left: 0;top: 0;right: 0;bottom: 0;background-color: red;">
  31.                 <div style="flex: 1;background-color: #0085ee;justify-content: center;align-items: center">
  32.                     <text style="font-size: 55">页面4</text>
  33.                     <text>目前必须用2层div包裹才能保证填充满</text>
  34.                     <text>第一层的样式必须是position: absolute;left: 0;top: 0;right: 0;bottom: 0;</text>
  35.                     <text>第二层的样式必须是flex:1</text>
  36.                 </div>
  37.             </div>
  38.         </host>
  40.         <div style="height: 100;width: 750;position: absolute;bottom: 0;left: 0;right: 0;flex-direction: row;background-color: #0088fb">
  41.             <div  @click="change(0)" style="flex: 1;align-items: center;justify-content: center">
  42.                 <text>推荐</text>
  43.             </div>
  44.             <div @click="change(1)" style="flex: 1;align-items: center;justify-content: center">
  45.                 <text>电视剧</text>
  46.             </div>
  47.             <div @click="change(2)" style="flex: 1;align-items: center;justify-content: center">
  48.                 <text>电影</text>
  49.             </div>
  50.             <div @click="change(3)" style="flex: 1;align-items: center;justify-content: center">
  51.                 <text>收藏</text>
  52.             </div>
  53.         </div>
  54.         <!--<prerender src="home.js"></prerender>-->
  56.         <!--<prerender src="app/busi/tab/serial.js"></prerender>-->
  57.         <!--<a href="demo/pagedemo.js" style="width: 100;height: 100;background-color: red;justify-content: center;align-items: center"><text>跳转</text></a>-->
  58.     </div>
  60. </template>
  62. <style>
  65. </style>
  67. <script>
  70.     export default {
  71.         components:{},
  72.         data(){
  73.            return {
  74.              logoUrl: 'http://img1.vued.vanthink.cn/vued08aa73a9ab65dcbd360ec54659ada97c.png',
  75.              target: 'World',
  76.              index:0,
  78.            }
  79.         },
  80.         methods: {
  81.            onchange(p){
  82.              this.toast(p.index)
  83.            },
  84.             update: function (e) {
  85.                 this.target = 'Weex'
  86.                 console.log('target:', this.target)
  87.             },
  88.             change(i)
  89.             {
  90.                 this.index=i;
  92.             },
  93.             show()
  94.             {
  95.                 var modal=weex.requireModule("modal")
  96.                 var p=weex.config.env.osVersion
  97. //              p=p.replace('.', "")
  98. //          p=p.replace(/./g,"");
  99.                 p= p.replace(/\./g,'')
  100.                 modal.alert({message:p})
  101.             }
  102.         }
  103.         ,
  106.         created:function(){
  109.             var globalEvent = weex.requireModule('globalEvent') ;
  110.             var self=this;
  111.             globalEvent.addEventListener("onPageInit", function (e) {
  114.                 const page = weex.requireModule('page');
  115.                 page.closeSplash();
  119.             });
  121.         },
  122.     }
  123. </script>