4
我创建了一个使用离子框架的天气应用程序演示。在这里，我使用包含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
\t class="item-avatar" ng-repeat="weather in weatherList"
\t href="#/auth/signup/{{weather.id}}" type="item-text-wrap">
<div class="container">
\t <div id="list_div" >
\t <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color:Lime;">
\t \t <table>
\t \t \t <tr>
\t \t <th><img id="img-view"ng-src="http://openweathermap.org/img/w/{{weather.weather[0].icon}}.png">
\t \t </th>
\t \t <th>
\t \t <h2>
\t \t <font color="#ffffff" style="text-align: center">{{weather.name}}</font>
\t \t </h2>
\t \t <h2>
\t \t <font color="#ffffff" style="text-align: center">
\t \t \t \t \t \t \t {{weather.main.temp}}°C</font>
\t \t \t \t \t </h2>
\t \t \t \t </th>
\t \t \t </tr>
\t \t </table>
\t </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 {
\t display: block;
\t margin: -10px;
\t width: 40px;
\t height: 40px;
\t margin-left: auto;
\t margin-right: auto;
}
.list_div {
\t margin-left: -60px;
\t margin-right: auto;
}
.item-complex .item-content,.item-radio .item-content {
\t background: none;
}
#rounded-view {
\t margin: 5px;
\t background: rgba(0, 0, 0, .5);
}
.item-avatar {
\t margin: 5px;
\t background: rgba(0, 0, 0, .5);
}
#list_div {
\t 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;
}