本文实例为大家分享了小程序实现搜索界面的具体代码，供大家参考，具体内容如下

效果图：

实现代码：

view class=' page ' view class=' page _ _ BD ' view class=' weui-search-bar ' view class=' weui-search-bar _ _ form ' view class=' weui-search-bar _ _ box ' icon class=' weui-icon-search _ in-box ' type=' search ' size=' 14 '/icon输入类型=' text ' class=' weui-search-bar _ _ input ' placeholder='搜索maxlength=' 10 ' value=' { { input val } } ' focus=' { { input shoud } } ' bind input=' input typing '/view class=' weui-icon-clear ' wx : if=' { { input val。 length { 0 } }”bind tap=“clear input”图标类型=“clear”大小=“14”/图标/视图/视图标签类=“weui-search-bar _ _ label”隐藏=“{ { input shoud } }”bind tap=“show”搜索/view/label/view view class=' weui-search-bar _ _ cancel-BTN ' hidden=' { {！输入显示} } "绑定点击="隐藏输入"取消/view/view view class=' weui-cells search bar-result ' wx : if=' { { InputVal。长度{ 0 } } '！-搜索列表-view class=' weui-cell _ _ BD ' wx : for=' { { list } } ' wx : key=' key '！-列表名称-view class=' list _ name ' data-index=' { { index } } ' data-name=' { { item。name } } '绑定tap=' BTN _ name '！-昵称-label class=' lab _ name ' { item。名称} }/标签/视图/视图/视图/视图/视图/视图js:

页面({ data: { //搜索框状态inputShowed: false，//搜索框值inputVal: ' '，//搜索渲染推荐数据列表：[ {name: '帝霸}，{ name: '遮天}，{ name: '道界天下}，{ name: '菜鸟}，{ name: '先飞' } ] }, //显示搜索框showInput:函数(){这个。setdata({ inputshoutd : true })；}, //隐藏搜索框样式隐藏输入：函数(){ this.setData({ inputVal: ' '，输入显示d : false })；}, //清除搜索框值clearInput:函数(){这个。setdata({ input val : ' ' })；}, //获取搜索框值输入类型：函数{这个。setdata({ inputval : e . detail。value })；控制台。日志(这个。数据。输入值)；}, //获取选中推荐列表中的值BTN _ name :函数(RES){控制台。日志(RES . CurrentTarget。数据集。索引，RES . CurrentTarget。数据集。姓名)；}});CSS:搜索栏-结果{边距-顶部： ^ 0；font-size : 14px} /* 搜索列表名称*/.list _ name { position :相对；宽度： 100%;高度： 90 rpx线高： 90 rpx边框-底部： 1rpx实心# ddd}/*列表名称*/.lab _ name {位置：绝对；left: 30rpx}记得最后在app.wxss中引入wehui.wxss

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。