开发详情页

详情页是空气质量指标（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. }