小程序顶部搜索框怎么实现
这篇文章主要为大家详细介绍了小程序实现搜索框功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
小程序顶部搜索框怎么实现
实现效果如下:
具体代码:
1、WXML文件
<!--搜索框 --> <view class="weui-search-bar"> <view class="weui-search-bar__form"> <!--点击之后,出现input框 --> <view class="weui-search-bar__box"> <icon class="weui-icon-search_in-box" type="search" size="14"></icon> <input type="text" class="weui-search-bar__input" placeholder="搜索" value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" /> <!--输入款字数大于0,则显示清除按钮 --> <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput"> <icon type="clear" size="14"></icon> </view> </view> <!--没点击之前,只是一些文字和图标 --> <label class="weui-search-bar__label" hidden="{{inputShowed}}" bindtap="showInput"> <icon class="weui-icon-search" type="search" size="14"></icon> <view class="weui-search-bar__text">搜索</view> </label> </view> <!--动态出现的“取消”键 --> <view class="weui-search-bar__cancel-btn" hidden="{{!inputShowed}}" bindtap="hideInput">取消</view> </view>
2、WXSS文件
.weui-search-bar { position: relative; padding: 8px 10px; display: -webkit-box; display: -webkit-flex; display: flex; box-sizing: border-box; background-color: #EFEFF4; border-top: 1rpx solid #D7D6DC; border-bottom: 1rpx solid #D7D6DC; } .weui-icon-search { margin-right: 8px; font-size: inherit; } .weui-icon-search_in-box { position: absolute; left: 10px; top: 7px; } .weui-search-bar__text { display: inline-block; font-size: 14px; vertical-align: middle; } .weui-search-bar__form { position: relative; -webkit-box-flex: 1; -webkit-flex: auto; flex: auto; border-radius: 5px; background: #FFFFFF; border: 1rpx solid #E6E6EA; } .weui-search-bar__box { position: relative; padding-left: 30px; padding-right: 30px; width: 100%; box-sizing: border-box; z-index: 1; } .weui-search-bar__input { height: 28px; line-height: 28px; font-size: 14px; } .weui-icon-clear { position: absolute; top: 0; right: 0; padding: 7px 8px; font-size: 0; } .weui-search-bar__label { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; border-radius: 3px; text-align: center; color: #9B9B9B; background: #FFFFFF; line-height: 28px; } .weui-search-bar__cancel-btn { margin-left: 10px; line-height: 28px; color: #09BB07; white-space: nowrap; font-size: 30rpx; }
3、JS文件
showInput: function () { this.setData({ inputShowed: true }); }, hideInput: function () { this.setData({ inputVal: "", inputShowed: false }); // getList(this); }, clearInput: function () { this.setData({ inputVal: "" }); // getList(this); }, inputTyping: function (e) { //搜索数据 // getList(this, e.detail.value); this.setData({ inputVal: e.detail.value }); }
PHP中文网,大量免费小程序开发教程,欢迎学习!
以上是小程序顶部搜索框怎么实现的详细内容。更多信息请关注PHP中文网其他相关文章!

热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

记事本++7.3.1
好用且免费的代码编辑器

SublimeText3汉化版
中文版,非常好用

禅工作室 13.0.1
功能强大的PHP集成开发环境

Dreamweaver CS6
视觉化网页开发工具

SublimeText3 Mac版
神级代码编辑软件(SublimeText3)

随着移动互联网技术和智能手机的普及,微信成为了人们生活中不可或缺的一个应用。而微信小程序则让人们可以在不需要下载安装应用的情况下,直接使用小程序来解决一些简单的需求。本文将介绍如何使用Python来开发微信小程序。一、准备工作在使用Python开发微信小程序之前,需要安装相关的Python库。这里推荐使用wxpy和itchat这两个库。wxpy是一个微信机器

实现微信小程序中的卡片翻转特效在微信小程序中,实现卡片翻转特效是一种常见的动画效果,可以提升用户体验和界面交互的吸引力。下面将具体介绍如何在微信小程序中实现卡片翻转的特效,并提供相关代码示例。首先,需要在小程序的页面布局文件中定义两个卡片元素,一个用于显示正面内容,一个用于显示背面内容,具体示例代码如下:<!--index.wxml-->&l

uniapp如何实现小程序和H5的快速转换,需要具体代码示例近年来,随着移动互联网的发展和智能手机的普及,小程序和H5成为了不可或缺的应用形式。而uniapp作为一个跨平台的开发框架,可以在一套代码的基础上,快速实现小程序和H5的转换,大大提高了开发效率。本文将介绍uniapp如何实现小程序和H5的快速转换,并给出具体的代码示例。一、uniapp简介unia

用户日常使用win10搜索框搜索内容和需要的软件时,发现了win10搜索框灰色不能用了的问题,一般在电脑策略组中将设置成禁用即可,下面一起看看win10搜索框灰色不能用解决方法。win10搜索框灰色不能用解决方法:1、按下win+R键,打开运行输入gpedit.msc。2、在本地组策略编辑器——选择管理模板——windows组件选项。3、找到搜索——允许使用Cortana这一选项。4、打开后在其页面选择已禁用,点击确定即可,重新启动电脑。

有些用户看到win10搜索框都是透明的,自己也想拥有,但是不知道怎么设置,现在有一个非常简单的方法,只要在win10商店下载软件即可,下面我们一起看看win10搜索框设置透明的方法吧。win10搜索框透明:1、右击任务栏选择搜索,将搜索框变成搜索图标。2、打开应用商店。3、搜索TranslucentTB软件。(可以选择下载汉化版)4、下载安装好之后。5、打开TranslucentTB,在右下方的任务栏中可以看到。6、将它设置成全透明即可。

本站10月31日消息,今年5月27日,蚂蚁集团宣布启动“汉字拾光计划”,最近又迎来新进展:支付宝上线“汉字拾光-生僻字”小程序,用于向社会征集生僻字,补充生僻字库,同时提供不同的生僻字输入体验,以帮助完善支付宝内的生僻字输入方法。目前,用户搜索“汉字拾光”、“生僻字”等关键词就可以进入“生僻字”小程序。在小程序里,用户可以提交尚未被系统识别录入的生僻字图片,支付宝工程师在确认后,将会对字库进行补录入。本站注意到,用户还可以在小程序体验最新的拆字输入法,这一输入法针对读音不明确的生僻字设计。用户拆

小程序备案操作步骤:1、准备个人身份证复印件、企业营业执照复印件、法人身份证复印件等备案材料;2、登录小程序管理后台;3、进入小程序设置页面;4、选择“基本设置”;5、填写备案信息;6、上传备案材料;7、提交备案申请;8、等待审核结果,如果备案不通过要根据原因进行修改,并重新提交备案申请;9、备案后续操作即可。

win10任务栏搜索框是一个非常使用好用的搜索工具,但是很多用户使用起来不习惯或者用不到,想关闭掉,其实只需要右键任务栏空白处,在其中找到搜索功能就可以关闭了。win10任务栏搜索框怎么关闭1、首先鼠标右键点击任务栏空白处,如图所示:2、在界面中,点击“搜索”选项,选择隐藏,如图所示:3、完成上面的设置,搜索框就隐藏起来了。PS:如果搜索框关闭不了可能是你的系统问题,需要重装系统来解决。
