实训第六天：搜索框布局及功能实现，实现上下滑动

最新推荐文章于 2024-02-23 16:24:34 发布

原创最新推荐文章于 2024-02-23 16:24:34 发布 · 435 阅读

0 ·

CC 4.0 BY-SA版权

实训专栏收录该内容

8 篇文章

订阅专栏

本文介绍了如何在微信小程序中实现天气预报搜索框的功能，包括输入框样式设置和搜索确认事件处理。此外，还详细展示了如何创建一个显示未来六天天气的横向滚动视图，每个天气项包含日期、天气状况和对应图标。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.实现小程序天气预报搜索框
<input class='ipt' placeholder-class='pla' placeholder='请输入城市名，快速查询天气信息' bindconfirm="finish" ></input>
wxss
.pla{
font-size: 26rpx;
}
.nav>.img{
width: 40rpx;
height: 40rpx;
position: absolute;
left: 45rpx;
top: 5rpx;
}
2.实现搜索功能

<view class='info'>
<view class='tem'>
{{tem}} <text>℃</text>
wxss：
.info .tem text{
position:absolute;
right:-30rpx;
top:-15rpx;
font-size:30rpx;
}
.info .wea{
color: #666;
}
.info .air_level{
margin: 10rpx;
font-size: 30rpx;
color: #777;
}
3.实现左右滑动：
<view class="section section_gap">
<view class="title">未来六天天气</view>
<scroll-view class="scroll-view_H" scroll-x style="width: 100%">
<view class="scroll-view-item_H bc_pink">
<view>{{weather.data[0].day}}</view>
<view>{{weather.data[0].wea}}</view>
<image src='../../images/{{weather.data[0].wea_img}}.png' style='width:70%;height:80px'></image></view>
<view class="scroll-view-item_H bc_pink">
<view>{{weather.data[1].day}}</view>
<view>{{weather.data[1].wea}}</view>
<image src='../../images/{{weather.data[1].wea_img}}.png' style='width:70%;height:80px'></image></view>
<view class="scroll-view-item_H bc_pink">
<view>{{weather.data[2].day}}</view>
<view>{{weather.data[2].wea}}</view>
<image src='../../images/{{weather.data[2].wea_img}}.png' style='width:70%;height:80px'></image>
</view>
<view class="scroll-view-item_H bc_pink">
<view>{{weather.data[3].day}}</view>
<view>{{weather.data[3].wea}}</view>
<image src='../../images/{{weather.data[3].wea_img}}.png' style='width:70%;height:80px'></image>
</view>
<view class="scroll-view-item_H bc_pink">
<view>{{weather.data[4].day}}</view>
<view>{{weather.data[4].wea}}</view>
<image src='../../images/{{weather.data[4].wea_img}}.png' style='width:70%;height:80px'></image></view>
<view class="scroll-view-item_H bc_pink">
<view>{{weather.data[5].day}}</view>
<view>{{weather.data[5].wea}}</view>
<image src='../../images/{{weather.data[4].wea_img}}.png' style='width:70%;height:80px'></image></view>
</scroll-view>
</view>
最后页面截图：