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;
}