我正在参加「初夏创意投稿大赛」详情请看：初夏创意投稿大赛”
炎炎夏日到来，我突发奇想整个天气预报玩玩，正好熟悉熟悉vue3和typescript的用法。 首先是效果图：
前置说明：
1、接口
这里天气预报的数据是调用了免费的天气预报接口：http://wthrcdn.etouch.cn/weather_mini?city=城市名
返回的数据格式长这样：
tips:抓包的时候这个接口会有乱码但是在控制台输出是没问题的=-=。
2、vue 这里我主要是想练习一下vue3和typescript所以才用的，你完全可以用其他框架去实现它。
实现过程
首先是标题的实现，这里用到了css动画,html就用了h1标签
h1 {
font-size: 45px;
color: rgb(252, 230, 133);
-webkit-animation: text-pop-up-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
both;
animation: text-pop-up-top 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@-webkit-keyframes text-pop-up-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc,
0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc,
0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
@keyframes text-pop-up-top {
0% {
-webkit-transform: translateY(0);
transform: translateY(0);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: none;
}
100% {
-webkit-transform: translateY(-50px);
transform: translateY(-50px);
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
text-shadow: 0 1px 0 #cccccc, 0 2px 0 #cccccc, 0 3px 0 #cccccc,
0 4px 0 #cccccc, 0 5px 0 #cccccc, 0 6px 0 #cccccc, 0 7px 0 #cccccc,
0 8px 0 #cccccc, 0 9px 0 #cccccc, 0 50px 30px rgba(0, 0, 0, 0.3);
}
}
接着是核心部分
这里的输入框和按钮，我偷懒直接用来naive-ui的组件,总体体验非常良好，俺很中意这组件库www.naiveui.com/zh-CN
<div class="btn_search">
<n-input
v-model:value="query.city"
style="width: 30%"
@keyup.enter.native="handleKeyUp"
type="text"
placeholder="输入城市"
/>
<n-button color="#1a87ff"> 搜索 </n-button>
</div>
下面是个小导航栏，显示的是北上广深，用了数组进行遍历
<div class="cityHot">
<span>热门城市：</span>
<div
class="names"
@click="handleQuery(item, i)"
:class="i == weathers.index ? 'namec' : ''"
v-for="(item, i) in cityList"
:key="i"
>
{{ item }}
</div>
</div>
</div>
// 这里是用来scss的写法，
.cityHot {
display: flex;
justify-content: center;
margin: 15px;
color: rgb(118, 209, 171);
//加了个小动画
-webkit-animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
animation: tracking-in-expand 0.7s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
.names {
margin-right: 15px;
cursor: pointer;
text-decoration: underline;
&:hover {
color: rgb(243, 189, 145);
}
}
.namec {
color: rgb(243, 149, 149);
}
}
天气预报的整体是
<n-spin :show="weathers.show"> //这里同样用到了navite-ui的组件
<div class="citySpan">{{ weathers.city }}</div> //这个是城市名
// 这块是天气预报显示的主体
<div class="weather">
<div
class="weather_body"
v-for="(item, index) in weathers.weatherList"
:key="index"
>
<div style="margin-top: 10px;"><b>{{ item.date }}</b></div>
<div><b>{{ item.low }}</b></div>
<div><b>{{ item.high }}</b></div>
<div><b>{{ item.type }}</b></div>
<div style="margin-bottom: 10px;"><b>{{ item.fengxiang }}</b></div>
<img class="spic" src="@/assets/beach.png" alt="">
</div>
</div>
</n-spin>
.weather {
width: 100%;
display: flex;
justify-content: space-evenly;
.weather_body {
width: 9%;
font-size: 15px;
color: rgb(112, 187, 192);
position: relative;
-webkit-animation: roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
animation: roll-in-blurred-left 0.65s cubic-bezier(0.230, 1.000, 0.320, 1.000) both;
border: 2px solid rgb(135, 238, 252);
background: #fff;
border-radius: 50%;
display: flex;
line-height: 25px;
flex-direction: column;
z-index: 1000;
&:hover{
-webkit-animation: vibrate-1 0.3s linear infinite both;
animation: vibrate-1 0.3s linear infinite both;
cursor: pointer;
}
.spic{
width: 50%;
position: absolute;
bottom: 0px;
right: -20px;
z-index: -1;
}
}
}
总体实现是非常简单的，但我想我写的肯定不是最优的写法，希望大佬可以指点指点。谢谢 tips: 这是dongdong.weinigb.cn/ 访问地址，有兴趣要源码的可以私聊我
