| <element name="multi-text"> |
| <template> |
| <div style="flex-direction: row;"> |
| <text class="text-style text-descript">{{descript}}</text> |
| <text class="text-style text-detail">{{detail}}</text> |
| </div> |
| </template> |
| |
| <style> |
| .text-style{ font-size: 30; margin-top:15; margin-left: 15; margin-bottom:15;} |
| .text-descript{ font-weight: bold; flex:1} |
| .text-detail{ flex:1} |
| </style> |
| |
| <script> |
| module.exports = { |
| data: { |
| descript:'', |
| detail:'', |
| }, |
| } |
| </script> |
| </element> |
| |
| <template> |
| <div style="width:730;margin:10;border-width:3; border-color:#00FF00;"> |
| <text>click every view to get view Rect information</text> |
| <scroller style="height:400; width:700; margin:10; border-width:3; border-color:#0000FF;"> |
| <!--Controll Space--> |
| <text onclick="getViewportRect" class="component viewportBtn">root view</text> |
| |
| <div style="flex-direction: row;"> |
| <text onclick="getViewRect" class="component basicBtn" id="basicview1">basicview1</text> |
| <text onclick="getViewRect" class="component basicBtn" id="basicview2">basicview2</text> |
| <text onclick="getViewRect" class="component basicBtn" id="basicview3">basicview3</text> |
| </div> |
| <div style="flex-direction: column;"> |
| <div style="flex-direction: row;"> |
| <text onclick="getViewRect" class="component basicBtn" id="basicview4">basicview4</text> |
| <text onclick="getViewRect" class="component basicBtn" id="basicview5">basicview5</text> |
| </div> |
| |
| <text onclick="getViewRect" class="component basicBtn" id="basicview6">basicview6</text> |
| </div> |
| </scroller> |
| |
| <!--Show Space--> |
| <div style="width:700; margin:10; border-width:3; border-color:#0000FF;"> |
| <!--Device Config--> |
| <text class="sub-title">Device Config</text> |
| <multi-text descript='Device Width:' detail={{configEnv.deviceWidth}}></multi-text> |
| <div class="div-split"></div> |
| <multi-text descript='Device Height:' detail={{configEnv.deviceHeight}}></multi-text> |
| |
| <!--View Rect Information--> |
| <text class="sub-title">View Rect Information</text> |
| <div style="flex-direction: row;"> |
| <div style="flex:1;"> |
| <text repeat="(key,value) in viewDesc" class="titleFont">{{value}}</text> |
| </div> |
| <div class="child-split"></div> |
| |
| <div class="child-split"></div> |
| <div style="flex:1;"> |
| <text repeat="(key,value) in viewRect" class="titleFont">{{value}}</text> |
| </div> |
| </div> |
| </div> |
| |
| </div> |
| </template> |
| |
| <style> |
| .sub-title{ height:40; background-color: rgb(91, 192, 222); border-color: rgb(70, 184, 218); color: #FFFFFF; border-width: 1;} |
| .div-split{ height: 2; border-width: 1; border-style:dashed; border-color: #375830;} |
| .titleFont{ font-size: 30; padding:15; border-bottom-width: 1} |
| .child-split{ width: 2; border-width: 1; border-style:dashed; border-color: #00FF00;} |
| .component{ border-width:3; font-size:60; text-align: center;background-color:rgb(240, 173, 78);} |
| .viewportBtn{ width: 300; height: 100; margin-top: 20; margin-left: 200; } |
| .basicBtn { width: 190; height: 180; margin-left: 30;margin-top: 20 ;font-size:40; padding: 35;} |
| .stickyBtn { position:sticky; width: 200; height: 60; margin-left: 30;margin-top: 20 ;font-size:40} |
| .fixedBtn { position:fixed; width: 200; height: 170; right: 100; top: 200;padding: 20} |
| .content { height: 400; margin: 10; padding: 20; font-size: 50; color: #00FF00 ;border-color: #FF0000; border-width: 3} |
| </style> |
| |
| <script> |
| module.exports = { |
| data: { |
| configEnv:{}, |
| viewRect:['View Rect'], |
| viewDesc:['----','width','height','top','left','bottom','right'], |
| contentList:['1','2','3','4','5','6','7','8','9'], |
| }, |
| created: function () { |
| this.$getConfig(function (config) { |
| this.configEnv = config.env |
| }.bind(this)); |
| }, |
| methods: { |
| getViewportRect: function(e) { |
| var dom = require('@weex-module/dom'); |
| dom.getComponentRect('viewport', function (data) { |
| if (data.result) { |
| this.viewRect = [this.viewRect[0]] |
| this.viewRect.push(data.size.width); |
| this.viewRect.push(data.size.height); |
| this.viewRect.push(data.size.top); |
| this.viewRect.push(data.size.left); |
| this.viewRect.push(data.size.bottom); |
| this.viewRect.push(data.size.right); |
| } |
| }.bind(this)); |
| }, |
| getViewRect: function(e) { |
| var dom = require('@weex-module/dom'); |
| dom.getComponentRect(this.$el(e.target.attr.value), function (data) { |
| if (data.result) { |
| this.viewRect = [this.viewRect[0]] |
| this.viewRect.push(data.size.width); |
| this.viewRect.push(data.size.height); |
| this.viewRect.push(data.size.top); |
| this.viewRect.push(data.size.left); |
| this.viewRect.push(data.size.bottom); |
| this.viewRect.push(data.size.right); |
| } |
| }.bind(this)); |
| } |
| } |
| } |
| </script> |