代码拉取完成,页面将自动刷新
同步操作将从 OpenHarmony/docs 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
历史页以图表的形式展示一周内空气质量指标值。在本页面,考虑显示效果,使用多个div替代chart组件来实现图表功能,详细代码如下:
<list style="width: 321px;height: 321px;top: 67px;left: 320px;">
<list-item class="info-list-item">
<div style="width: 321px;height: 80px;flex-direction: column;align-items: flex-start;">
<text class="div-info-historical-data">{{historicalData}}</text>
</div>
</list-item>
<!--使用for属性来动态生成listitem,datasets对应history.js中的datasets变量,根据变量数组中元素个数来创建组件-->
<list-item style="width: 321px;height: 160px;" for="{{datasets}}">
<div style="width: 321px;height: 160px;flex-direction: column;">
<div style="width: 321px;height: 2px;background-color: #f5fffa;"></div>
<!--$item是datasets中的子元素-->
<text class="gas-name">{{$item}}</text>
<div style="width: 321px;height: 100px;margin-top: 4px;justify-content: flex-start;align-items: flex-end;">
<!--示例中的颜色为固定值,实际开发中可以考虑动态绑定-->
<div style="width: 21px;margin-left: 21px;height: 10px;backgroundColor: #00ff00;"></div>
<div style="width: 21px;margin-left: 21px;height: 20px;;backgroundColor: #00ff00;"></div>
<div style="width: 21px;margin-left: 21px;height: 90px;backgroundColor: #ff0000;"></div>
<div style="width: 21px;margin-left: 21px;height: 80px;backgroundColor: #ff0000;"></div>
<div style="width: 21px;margin-left: 21px;height: 60px;backgroundColor: #999999;"></div>
<div style="width: 21px;margin-left: 21px;height: 50px;backgroundColor: #999999;"></div>
<div style="width: 21px;margin-left: 21px;height: 100px;backgroundColor: #ff0000;"></div>
</div>
<!--表格中的X轴下标采用图片-->
<image style="width: 321px;height: 20px;" src="common/week.png"></image>
</div>
</list-item>
<list-item class="info-list-item">
<!--返回详情页按钮-->
<input type="button" value="Back" style="border-width: 2px;border-color: #90ee90;width: 256px;height: 60px;margin-left: 30px;" onclick="backDetail"/>
</list-item>
</list>
.div-info-location{
color: #dcdcdc;
width: 321px;
height: 40px;
}
.div-info-historical-data{
color: #f5fffa;
width: 321px;
height: 40px;
}
.gas-name{
color: #f0ffff;
text-align: right;
width: 321px;
height: 32px;
}
.info-list-item{
width: 321px;
height: 80px;
}
import router from'@system.router'
module.exports = {
data: {
historicalData: 'historicalData',
datasets: ['CO','O3','NO2','NO','PM25','SO2']
},
onInit(){
//国际化信息处理
this.historicalData = this.$t(this.historicalData);
},
backDetail(){
router.replace({ //返回详情页
uri: 'pages/detail/detail'
});
}
}
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。