.wind_mill{
220rpx;
5 /* background-color: rgba(25,83,157,0.5); */
@keyframes vanflash{
from{transform: rotate(0deg); transform-origin: center;}
10 to{transform: rotate(360deg);transform-origin:11 12 .vane{
14 15 16 animation-name: vanflash;
animation-duration: 5s;
animation-iteration-count: infinite;
-webkit-animation-name: -webkit-animation-duration: -webkit-animation-iteration-count:22 }
23 .vane1{
80rpx;
4rpx;
background-color: #FFFFFF;
border-radius: 5rpx;
29 30 left: 100rpx;
31 top:100rpx;
32 transform: rotate(0deg);
transform-origin:left;
-webkit-transform:rotate(0deg);
35
36 }
37 .vane2{
41 42 43 44 rotate(120deg);
rotate(120deg);
48 }
49 .vane3{
52 53 54 rotate(240deg);
rotate(240deg);
60 }
61 .cicle{
62 63 64 90rpx;
65 66 20rpx;
67 68 16rpx;
69 }
70 .blade{
71 120rpx;
72 10rpx;
73 74 75 76 77 78 rotate(90deg);
79 80 rotate(90deg);
81 }
82 （三）天气组件
天气组件，引用了前面两个组件，并有自定义数据内容，如下所示：
页面(template)代码如下：
scroll-view scroll-y="true" class="main"="current"="district">{{district}}="temp">{{temp}}°C 6 ="temp_range">{{temprange}}="temp_desc">{{tempdesc}}br="temp_src"10 ="temp_src_left">中国气象11 ="temp_src_right">上次更新时间：{{updatetime}}14 scroll-x="true"15 ="hour" enable-flex16 ="each_hour" v-for="item in timelist"17 ="each_hour_time">{{item.time}}18 image :src="item.img" mode="scaleToFill"="each_hour_img" image19 ="each_hour_temp">{{item.temp}}20 21 22 scroll-view24 ="sevenday"25 ="each_day"="item in daylist"26 ="each_day_text"27 {{item.day}} {{item.week}}
28 29 ="each_day_img" :src=""30 ="each_day_temp"31 32
33 34 ="air"35 ="air_title"36 ="" style="flex: 1;">空气质量37 ="text-align: right;flex: 1;">更多>38 39 ="air_body"40 ="air_left"41 airprogress ="airprogress" :cvalue="airvalue"airprogress42 43 ="air_right"44 ="air_content"="item in airlist"45 ="air_content_name">{{item.name}}46 ="air_content_value">{{item.value}}47 48 49 50 51 ="wind"52 ="wind_title"53 >风向风力54 55 56 ="wind_body"57 ="wind_left"58 windmill ="wind01"windmill59 ="wind02"60 61 ="wind_right"62 ="wind_right_direction"63 style="flex: 1;text-align: left;">风向64 >{{winddirection}}65 66 ="wind_right_power"67 >风力68 >{{windpower}}69 70 71 72 73 ="provider">provide by Alan.hsiang74 75 >
View Code
脚本(JavaScript)代码如下：
2 import windmill from "../windmill/windmill.vue"
3 import airprogress from "../airprogress/airprogress.vue"
4 export 5 components: {
windmill,1)"> 7 airprogress
props:{
10 district:{
type:String,1)">12 required:true13 temp:{
type:Number,1)">default:0
18 temprange:{
19 20
21 tempdesc:{
23 24
25 26 updatetime:{
28
29 30 timelist:{
31 type:Array,1)">32
33 34 daylist:{
35 36
37 38 airvalue:{
39 default:1041
42 43 airlist:{
44 45
46 47 winddirection:{
48 49
50 51 windpower:{
52 53
54 }
55 56 57 58
59
60 61 62 63 </script>
View Code
样式(CSS)代码如下：
1 2 view {
3 border: #007AFF 1rpx solid; 4 font-family: Arial,Helvetica,sans-serif;
5 font-size: 28rpx;
6 2rpx;
7 }
8
9 .main {
10 100%;
11 12 13 rgba(25,0.5);
14 color: 15 }
16
17 .current {
18 flex;
19 flex-direction: column;
20 vertical-align: middle;
21 justify-content: center;
22 400rpx;
23 border-bottom: #F1F1F1 2rpx solid;
24 }
25
26 .current view {
27 margin-bottom: 28 }
29
30 .district {
31 60rpx;
32 45rpx;
33 text-align: 34
35 }
36
37 .temp {
38 39 70rpx;
40 41 line-height: 1.5;
42 }
43
44 .temp_range {
45 46 40rpx;
47 48 49 }
50
51 .temp_desc {
52 50rpx;
53 30rpx;
54 55 56 }
57
58 .temp_src {
59 60 row;
61 justify;
62 bottom;
63 }
64
65 .temp_src_left {}
66
67 .temp_src_right {
68 flex: 1;
69 right;
70 }
71
72 .top {
73 74 75 }
76
77 .hour {
78 79 80 81 small;
82 margin-top: 83 84 85 }
86 .each_hour{
87 margin-left: 6rpx;
88 }
89 .each_hour_img{
90 91 92 }
93 .sevenday {
94 95 96 }
97
98 .each_day {
99 100 101 102 103 104
105 }
106
107
108 .each_day_text {
109 110 left;
111 2;
112 }
113
114
115 .each_day_img {
116 117 118 }
119
120 .each_day_temp {
121 122 123 124 }
125
126 .air {
127 128 129 margin:130 }
131
132 .air_title {
133 134 135 136 }
137
138 .air_body {
139 140 141 }
142
143 .air_left {
144 145 inline-block;
146 147 148 }
149 .airprogress{
150 151 152 }
153 .air_right {
154 155 156 157 }
158
159 .air_content {
160 161 162 }
163
164 .air_content_name {
165 166 167 }
168
169 .air_content_value {
170 171 172 }
173
174
175 .wind{
176 177 178 260rpx;
179 180 }
181 .wind_title{
182 183 184 }
185 .wind_body{
186 187 188 }
189 .wind_left{
190 191 192 150rpx;
193 }
194 .wind_right{
195 196 197 198 }
199 .wind_right_direction{
200 0.5;
201 202 203 }
204 .wind_right_power{
205 206 207 208 }
209 .wind_left_img{
210 140rpx;
211 212 }
213 .wind01{
214 215 216 0rpx;
217 }
218 .wind02{
219 220 -20rpx;
221 222 }
223 .provider{
224 225 }
226 </style>
View Code
当组件定义完成，就可以在页面引用组件，如下所示：
本例采用swiper来实现左右滑动功能，页面(template)源码如下：
swiper :indicator-dots="showIndicatorDots" indicator-color="#FFFFFF" indicator-active-color="#FF0000" :autoplay="isAutoPlay"swiper-item v-for="(item,index) in weather_content"weather :id="index"
:district="item.district"
7 :temp="item.temp"
8 :tempdesc="item.tempdesc"
:temprange="item.temprange"
:updatetime="item.updatetime"
:timelist="item.time_list"
:daylist="item.day_list"
:airvalue="item.air_value"
:airlist="item.air_list"
:winddirection="item.winddirection"
:windpower="item.windpower"
class="weather"18
weather20 swiper-item21 swiper22 >
View Code
本例通过脚本造了一些数据，没有进行接口调用，脚本(JavaScript)代码如下：
1 <script>
2 import weather from "@/components/weather/weather.vue"
3 export 4 5 weather
6 7 8 9 title: 'Hello' 10 showIndicatorDots: 11 isAutoPlay:false 12 weather_content:[{
13 district:"龙岗区" 14 temp:23 15 temprange:"-2°C / 10°C" 16 tempdesc:"晴 空气良" 17 updatetime:"22:10" 18 time_list: [{
19 time: "00:00" 20 img: "../../static/day/00.png" 21 temp: "0°C"
22 },1)"> 23 {
24 time: "01:00" 25 img: "../../static/day/01.png" 26 temp: "1°C"
27 28 time: "02:00" 29 img: "../../static/day/02.png" 30 temp: "2°C"
31 32 33 time: "03:00" 34 img: "../../static/day/03.png" 35 temp: "3°C"
36 37 time: "04:00" 38 img: "../../static/day/04.png" 39 temp: "4°C"
40 41 42 time: "05:00" 43 img: "../../static/day/05.png" 44 temp: "5°C"
45 46 time: "06:00" 47 img: "../../static/day/06.png" 48 temp: "6°C"
49 50 51 time: "07:00" 52 img: "../../static/day/07.png" 53 temp: "7°C"
54 55 time: "08:00" 56 img: "../../static/day/08.png" 57 temp: "8°C"
58 59 60 time: "09:00" 61 img: "../../static/day/09.png" 62 temp: "9°C"
63 64 time: "10:00" 65 img: "../../static/day/10.png" 66 temp: "10°C"
67 68 69 time: "11:00" 70 img: "../../static/day/11.png" 71 temp: "11°C"
72 73 time: "12:00" 74 img: "../../static/day/12.png" 75 temp: "12°C"
76 77 78 time: "13:00" 79 img: "../../static/day/13.png" 80 temp: "13°C"
81 82 time: "14:00" 83 img: "../../static/day/14.png" 84 temp: "14°C"
85 86 87 time: "15:00" 88 img: "../../static/day/15.png" 89 temp: "15°C"
90 91 time: "16:00" 92 img: "../../static/day/16.png" 93 temp: "16°C"
94 95 96 time: "17:00" 97 img: "../../static/day/17.png" 98 temp: "17°C"
99 100 time: "18:00"101 img: "../../static/day/18.png"102 temp: "18°C"
103 104 105 time: "19:00"106 img: "../../static/day/19.png"107 temp: "19°C"
108 109 time: "20:00"110 img: "../../static/day/20.png"111 temp: "20°C"
112 113 114 time: "21:00"115 img: "../../static/day/21.png"116 temp: "21°C"
117 118 time: "22:00"119 img: "../../static/day/22.png"120 temp: "22°C"
121 122 123 time: "23:00"124 img: "../../static/day/23.png"125 temp: "23°C"
126 }
127 ],1)">128 day_list: [{
129 day: "10月31日"130 week: "昨天"131 img: "../../static/night/00.png"132 temp: "26°C/21°C"
133 134 135 day: "11月01日"136 week: "今天"137 img: "../../static/night/01.png"138 temp: "22°C/11°C"
139 140 141 day: "11月02日"142 week: "明天"143 img: "../../static/night/03.png"144 temp: "12°C/11°C"
145 146 147 day: "11月03日"148 week: "星期二"149 img: "../../static/night/04.png"150 temp: "18°C/01°C"
151 152 153 day: "11月04日"154 week: "星期三"155 img: "../../static/night/06.png"156 temp: "22°C/02°C"
157 158 159 day: "11月05日"160 week: "星期四"161 img: "../../static/night/07.png"162 temp: "12°C/02°C"
163 164 165 day: "11月07日"166 week: "星期五"167 img: "../../static/night/09.png"168 temp: "06°C/02°C"
169 170 171 air_value:30172 air_list: [{
173 name: "PM10"174 value: 23
175 176 177 name: "PM2.5"178 value: 25
179 180 181 name: "NO2"182 value: 28
183 184 185 name: "SO2"186 value: 5
187 188 189 name: "O3"190 value: 35
191 192 193 name: "CO"194 value: 0.91
195 196 197 winddirection:"北风"198 windpower:"3~4级"
199 },1)">200 district:"东城区"201 temp:13202 temprange:"12°C / 20°C"203 tempdesc:"阴 空气很好"204 updatetime:"22:00"205 206 time: "00:00"207 img: "../../static/night/00.png"208 temp: "0°C"
209 210 211 time: "01:00"212 img: "../../static/night/01.png"213 temp: "1°C"
214 215 time: "02:00"216 img: "../../static/night/02.png"217 temp: "2°C"
218 219 220 time: "03:00"221 img: "../../static/night/03.png"222 temp: "3°C"
223 224 time: "04:00"225 img: "../../static/night/04.png"226 temp: "4°C"
227 228 229 time: "05:00"230 img: "../../static/night/05.png"231 temp: "5°C"
232 233 time: "06:00"234 img: "../../static/night/06.png"235 temp: "6°C"
236 237 238 time: "07:00"239 img: "../../static/night/07.png"240 temp: "7°C"
241 242 time: "08:00"243 img: "../../static/night/08.png"244 temp: "8°C"
245 246 247 time: "09:00"248 img: "../../static/night/09.png"249 temp: "9°C"
250 251 time: "10:00"252 img: "../../static/night/10.png"253 temp: "10°C"
254 255 256 time: "11:00"257 img: "../../static/night/11.png"258 temp: "11°C"
259 260 time: "12:00"261 img: "../../static/night/12.png"262 temp: "12°C"
263 264 265 time: "13:00"266 img: "../../static/night/13.png"267 temp: "13°C"
268 269 time: "14:00"270 img: "../../static/night/14.png"271 temp: "14°C"
272 273 274 time: "15:00"275 img: "../../static/night/15.png"276 temp: "15°C"
277 278 time: "16:00"279 img: "../../static/night/16.png"280 temp: "16°C"
281 282 283 time: "17:00"284 img: "../../static/night/17.png"285 temp: "17°C"
286 287 time: "18:00"288 img: "../../static/night/18.png"289 temp: "18°C"
290 291 292 time: "19:00"293 img: "../../static/night/19.png"294 temp: "19°C"
295 296 time: "20:00"297 img: "../../static/night/20.png"298 temp: "20°C"
299 300 301 time: "21:00"302 img: "../../static/night/21.png"303 temp: "21°C"
304 305 time: "22:00"306 img: "../../static/night/22.png"307 temp: "22°C"
308 309 310 time: "23:00"311 img: "../../static/night/23.png"312 temp: "23°C"
313 314 315 316 day: "10月31日"317 week: "昨天"318 img: "../../static/day/00.png"319 temp: "6°C/21°C"
320 321 322 day: "11月01日"323 week: "今天"324 img: "../../static/day/01.png"325 temp: "12°C/11°C"
326 327 328 day: "11月02日"329 week: "明天"330 img: "../../static/day/03.png"331 temp: "22°C/09°C"
332 333 334 day: "11月03日"335 week: "星期二"336 img: "../../static/day/04.png"337 temp: "28°C/11°C"
338 339 340 day: "11月04日"341 week: "星期三"342 img: "../../static/day/06.png"343 temp: "12°C/02°C"
344 345 346 day: "11月05日"347 week: "星期四"348 img: "../../static/day/07.png"349 temp: "22°C/12°C"
350 351 352 day: "11月07日"353 week: "星期五"354 img: "../../static/night/09.png"355 temp: "16°C/12°C"
356 357 358 air_value:67359 360 name: "PM10"361 value: 63
362 363 364 name: "PM2.5"365 value: 39
366 367 368 name: "NO2"369 value: 23
370 371 372 name: "SO2"373 value: 5
374 375 376 name: "O3"377 value: 65
378 379 380 name: "CO"381 value: 0.71
382 383 384 winddirection:"东南风"385 windpower:"1~4级"
386 }]
387 388 389 onLoad() {
390 console.log("测试加载页面")
391 392 onShow(){
393 console.log("页面onshow...."394 395 methods: {
396
397 398 399 </script>
View Code
样式(CSS)代码如下：
.content {
#007AFF;
6 }
7 swiper{
10 }
.swiper-item{
border: #007AFF 1rpx solid;
13 }
14 .weather{
16 }
17 （五）注意事项
例子虽小，开发时也会踩坑，具体事项如下：
1. 开发过程中，在运行到Chrome浏览器，一切正常，但是当运行到Android真机时，页面除了导航条显示，其他一片空白，后来发现，需要在App.vue中定义页面的高度，才可以正常显示。App.vue源码如下所示：
<script>
export default {
onLaunch: function() {
console.log('App Launch')
5 } 6 onShow: function() {
console.log('App Show')
8 } 9 onHide: function() {
console.log('App Hide')
11 }
13 </script>
14
16 每个页面公共css uni-page-body,#app {width:100%;height: 100%;}
18 #ifdef APP-PLUS 19
20 以下样式用于 hello uni-app 演示所需 21 page {
background-color: #F4F5F6; font-size: 28rpx; 25 line-height: 1.8; 26 }
27 #endif28 </style>
View Code
2. 在开发过程中，最初圆形进度条是采用svg进行开发，在Chrome浏览器显示正常，但是在手机App上显示不出来，并造成页面显示一大片空白，后来不得已采用css实现。
备注
次北固山下
【作者】王湾 【朝代】唐
客路青山外，行舟绿水前。
潮平两岸阔，风正一帆悬。
海日生残夜，江春入旧年。
乡书何处达？归雁洛阳边。
