开发详情页

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

detail.hml

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