Question

我使用离子框架创建了一个天气应用演示。在这里我使用了包含4个菜单项的幻灯片菜单（我的城市天气，预测，地图和风和压力）。点击预测菜单，打开一个标签视图，其中包含天气信息的城市列表是打开（使用带有城市代码的天气api）。数据显示在列表中，每个城市都有不同的列。但是这个列表在整页或屏幕上打开。

现在我想打开这些城市只有半页我可以滚动城市，半页我要打开一张地图。我尝试了很多分工，但没有成功。检查我的代码，如下所示，让我知道我错在哪里。

任何帮助都将是Appriciated。

这是我的代码：

   auth-signup:
    <ion-header-bar class="bar-positive">
    <h1 class="title">ForeCast</h1>
    </ion-header-bar>

//class avatar defined in style.css for column item design for Forecast.
    <ion-content> <ion-list> <ion-item
    	class="item-avatar" ng-repeat="weather in weatherList"
    	href="#/auth/signup/{{weather.id}}" type="item-text-wrap"> 
       <div class="container">
    	<div id="list_div" >
    	<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color:Lime;">
    		<table>
    			<tr>
    		<th><img id="img-view"ng-src="http://openweathermap.org/img/w/{{weather.weather[0].icon}}.png">
    		</th>
    		<th>
    		<h2>
    		<font color="#ffffff" style="text-align: center">{{weather.name}}</font>
    		</h2>
    		<h2>
    		<font color="#ffffff" style="text-align: center">
    							{{weather.main.temp}}°C</font>
    					</h2>
    				</th>

    			</tr>
    		</table>
    	</div>
    </div>
    </ion-item> </ion-list> </ion-content>

// want this class division under under cities list. 
    <div class="map_div">Map View</div>
// style for the image and the text display in list column item.
    <style>
    #img-view {
    	display: block;
    	margin: -10px;
    	width: 40px;
    	height: 40px;
    	margin-left: auto;
    	margin-right: auto;
    }
    .list_div {
    	margin-left: -60px;
    	margin-right: auto;
    }
    .item-complex .item-content,.item-radio .item-content {
    	background: none;
    }
    #rounded-view {
    	margin: 5px;
    	background: rgba(0, 0, 0, .5);
    }
    .item-avatar {
    	margin: 5px;
    	background: rgba(0, 0, 0, .5);
    }
    #list_div {
    	margin: -5px;
    }
    </style>

的style.css

.item-avatar.top-cont{border:none}
.item-avatar.top-cont img{float:left; margin-right:10px; vertical-align:top}
.item-avatar.top-cont h1{color:#fff;}

ul.list_vw{padding:0; margin:0}
ul.list_vw li{list-style-type:none; float:left; margin-right:10px; padding-bottom:5px; color:#fff; font-size:16px; width:44%}

ul.list_vw.sec_vw{margin-top:10px; display:inline-block}

ul.list_vw.sec_vw li{width:100%}

.scroll-content{
  background-image:url("../img/app_backgroun.jpg");
}

.transparent {
    background: transparent !important;
}
 #container {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
}

#list_div {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 50%;
  background-color:none;
  text-align:center;
  
}
     #map_div {
  position: absolute;
  top: 50%;
  right: 0;
  left: 0;
  bottom: 0;
  background-color:green;
  text-align:center;
  color:#FFFFFF;
}

Answer 1

而不是像固定像素一样去固定视图并将其更改为百分比值。我发现这非常有趣，你在左边使用margin -60 px来显示正确的块...和<li>块的宽度为100％。将<div>的宽度保持为％格式，一边为50％，另一边为40％，这样两者都可以依赖内联和填充和边距。

使用离子框架将分屏分为两个部门？

1 个答案: