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.实现搜索功能
<!-- weather -->
<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">
<
实训第六天:搜索框布局及功能实现,实现上下滑动
最新推荐文章于 2024-02-23 16:24:34 发布
本文介绍了如何在微信小程序中实现天气预报搜索框的功能,包括输入框样式设置和搜索确认事件处理。此外,还详细展示了如何创建一个显示未来六天天气的横向滚动视图,每个天气项包含日期、天气状况和对应图标。
摘要由CSDN通过智能技术生成