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

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>
最后页面截图：

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

六十九、完成Vue项目城市选择页，路由配置，搜索框布局、列表布局、BetterScroll 的使用和字母表布局
2020/10/28. 周三.今天又是奋斗的一天. @Author:Runsen 写在前面:我是「Runsen」,热爱技术.热爱开源.热爱编程.技术是开源的.知识是共享的.大四弃算法转前端,需要每天的 ...
Ajax实现百度搜索框自动提示功能
Ajax实现百度搜索框自动提示功能当你在搜索框内写入关键字时下拉框会匹配和你输入的关键字相匹配的信息文章目录 Ajax实现百度搜索框自动提示功能一.实现效果二.代码实现 1.前端页面 2.后端 ...
Bootstrap4+MySQL前后端综合实训-Day07-PM【用户信息管理页面——功能展示(分页显示数据、添加用户、批量删除用户、编辑用户信息)、servlet项目代码整理汇总】
[Bootstrap4前端框架+MySQL数据库]前后端综合实训[10天课程博客汇总表详细笔记][附:实训所有代码] 目录页面展示分页显示数据添加用户信息 (单个/批量)删除用户编辑 ...
[JavaWeb实训Day3]__button_框架布局点击事件
目录一.基于JavaScript框架布局二.button设置id 样式三.button点击事件快速链接:[JavaWeb项目实训]--总目录我的运行环境在前面博客提到过,这里是在wc1项目下 ...
android搜索框布局文件,android搜索框列表布局，流程及主要步骤思维导图
android搜索框列表布局,流程及主要步骤思维导图 android搜索框列表布局,流程及主要步骤思维导图 activity_coin_search.xml ---------- android:id ...
实现百度搜索框提示语功能
利用百度jsonp接口实现搜索提示语. jsonp.js封装 function jsonp(url, options) {// 创建script标签var $script = document.cre ...
js实现搜索框跳转功能
毕设篇:搜索框的逻辑实现功能说明实现搜索框的响应跳转功能,符合匹配条件跳转对应页面,不符合弹出alert提示框或跳转404页面案例实现源码提取码:love 效果展示代码 ...
校内实训第六天学习笔记
通过使用https://www.tianqiapi.com/api/接口实现天气预报页面主要是在首页实现可以在搜索框里搜索显示其他城市的天气. 主要通过flex布局实现对界面的设置. 分版块进行设置. ...
【Vue实践】列表搜索框中模糊搜索功能的两种实现方式
文章目录 1.Demo演示 2.HTML结构 3.实现 3.1 基于计算属性`computed`实现 3.2 基于侦听器`watch`实现 1.Demo演示模糊搜索功能是日常开发中常见的一种功能,这 ...

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

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

最新文章

热门文章