开发详情页

详情页是空气质量指标（CO、NO2、PM10、PM2.5、SO2）详细数据的展示。因此，使用多个text组件来展示即可；另外为实现页面上下连续滑动效果，选择list组件；需要注意的是list子组件必须是list-item，并且可以有多个。该页面实现较为简单，主要是页面排版和样式的处理，详细代码如下：

detail.hml

  1. <list style="top:67px;left:320px;width:321px;height:350px;">
  2.     <list-item style="width:321px;height:300px;">
  3.         <div style="width: 321px;height:300px;background-color:#000000;flex-direction:column;align-items:flex-start;">
  4.         <text style="width:321px;height:40px; color:#dcdcdc;">{{location}}</text>
  5.         <div class="line-div"></div>
  6.         <!-显示所有指标值-->
  7.         <div class="info-div-width-height" style="margin-top:10px;">
  8.             <text class="gas-name">CO</text>
  9.             <text class="gas-value">{{airData[0]}}</text>
  10.         </div>
  11.         <div class="info-div-width-height" style="margin-top:10px;">
  12.             <text class="gas-name">NO2</text>
  13.             <text class="gas-value">{{airData[1]}}</text>
  14.         </div>
  15.         <div class="info-div-width-height" style="margin-top:10px;">
  16.             <text class="gas-name">PM10</text>
  17.             <text class="gas-value">{{airData[2]}}</text>
  18.         </div>
  19.         <div class="info-div-width-height" style="margin-top:10px;">
  20.             <text class="gas-name">PM2.5</text>
  21.             <text class="gas-value">{{airData[3]}}</text>
  22.         </div>
  23.         <div class="info-div-width-height" style="margin-top:10px;">
  24.             <text class="gas-name">SO2</text>
  25.             <text class="gas-value">{{airData[4]}}</text>
  26.         </div>
  27.         </div>
  28.     </list-item>
  29.     <list-item style="width:321px;height:220px;">
  30.         <div style="width:321px;height:220px;background-color:#000000;flex-direction:column;align-items:flex-start;">
  31.             <!-更新时间-->
  32.             <text class="config-info">{{updated}}:{{updateStatus}}</text>
  33.             <!-数据源-->
  34.             <text class="config-info">{{dataSourceName}}:{{dataSource}}</text>
  35.             <div class="line-div"></div>
  36.             <!-页面跳转按钮-->
  37.             <div style="width:321px; height:55px;align-items:center; margin-top:20px;">
  38.                 <input type="button"value="History" style="border-width: 3px;margin-left:10px; border-color: #90ee90;width:146px;height:50;"onclick="openHistory"/>
  39.                 <input type="button"value="Close" style="border-width: 3px;margin-left:5px; border-color:#ff0000;width:146px;height:50;"onclick="backMain"/>
  40.             </div>
  41.         </div>
  42.     </list-item>
  43. </list>

detail.css

  1. .line-div{
  2.     background-color:#f5fffa;
  3.     height:2px;
  4.     width:454px;
  5. }
  6. .info-div-width-height{
  7.     width:321px;
  8.     height:60px;
  9.     margin-top: 20px;
  10. }
  11. .gas-name{
  12.     color:#f5fffa;
  13.     width:160px;
  14.     height:30px;
  15. }
  16. .gas-value{
  17.     text-align:right;
  18.     color:#00fa9a;
  19.     width:160px;
  20.     height:30px;
  21. }
  22. .config-info {
  23.     height:40px;
  24.     width:321px;
  25.     color:#f5fffa;
  26. }

detail.js

  1. import router from'@system.router'
  2. export default {
  3.     data:{  //初始化信息
  4.         location:"HangZhou",
  5.         udpateStatus:"1h ago",
  6.         dataSource:"tianqi.com",
  7.         updateTime:"15:13",
  8.         updated:'Updated',
  9.         dataSourceName:'Data Source',
  10.         sampledOn:'Sampled on',
  11.         cityIndex:0,
  12.         airData:['100', '90', '120', '50', '150', '40', '25']
  13.     },
  14.     onInit(){
  15.         //国际化信息处理
  16.         this.location = this.$t(this.location);
  17.         this.updated = this.$t("updated");
  18.         this.dataSourceName = this.$t("dataSourceName");
  19.         this.sampledOn = this.$t("sampledOn");
  20.         this.monitoringStation = this.$t("monitoringStation");
  21.         if(this.selectedCityIndex != null){  //保存主页传过来的城市信息
  22.             this.cityIndex= this.selectedCityIndex;
  23.         }
  24.     },
  25.     openHistroy(){  //跳转到历史页
  26.         router.replace({
  27.             uri:'pages/history/history'
  28.         });
  29.     },
  30.     backMain(){  //返回主页，并将选择的城市信息带回
  31.         router.replace({
  32.             uri:'pages/index/index',
  33.             params:{selectedCityIndex:this.cityIndex}
  34.         });
  35.     }
  36. }