小程序实现搜索界面 小程序实现推荐搜索列表效果


Posted in Javascript onMay 18, 2019

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

效果图:

小程序实现搜索界面 小程序实现推荐搜索列表效果小程序实现搜索界面 小程序实现推荐搜索列表效果

实现代码:

<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>
   <input type="text" class="weui-search-bar__input" placeholder="搜索" maxlength='10' value="{{inputVal}}" focus="{{inputShowed}}" bindinput="inputTyping" />
   <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>
 <view class="weui-cells searchbar-result" wx:if="{{inputVal.length > 0}}">
  <!-- 搜索列表 -->
  <view class="weui-cell__bd" wx:for="{{list}}" wx:key="key">
  <!-- 列表名称 -->
  <view class='list_name' data-index='{{index}}' data-name='{{item.name}}' bindtap='btn_name'>
   <!-- 昵称 -->
   <label class='lab_name'>{{item.name}}</label>
  </view>
  </view>
 </view>
 
 </view>
</view>

js:

Page({
 data: {
 // 搜索框状态
 inputShowed: false,
 // 搜索框值
 inputVal: "",
 //搜索渲染推荐数据
 list:[
  {name:"帝霸"},
  { name: "遮天" },
  { name: "道界天下" },
  { name: "菜鸟" },
  { name: "先飞" }
 ]
 },
 // 显示搜索框
 showInput: function () {
 this.setData({
  inputShowed: true
 });
 },
 // 隐藏搜索框样式
 hideInput: function () {
 this.setData({
  inputVal: "",
  inputShowed: false
 });
 },
 // 清除搜索框值
 clearInput: function () {
 this.setData({
  inputVal: ""
 });
 },
 // 获取搜索框值
 inputTyping: function (e) {
 this.setData({
  inputVal: e.detail.value
 });
 console.log(this.data.inputVal);
 },
 // 获取选中推荐列表中的值
 btn_name:function(res){
 console.log(res.currentTarget.dataset.index, res.currentTarget.dataset.name);
 }
});

CSS:

.searchbar-result{
 margin-top: 0;
 font-size: 14px;
}
 
/* 搜索列表名称 */
.list_name{
 position: relative;
 width: 100%;
 height: 90rpx;
 line-height: 90rpx;
 border-bottom: 1rpx solid #ddd;
}
/* 列表名称 */
.lab_name{
 position: absolute;
 left: 30rpx;
}

记得最后在app.wxss中引入wehui.wxss

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery乱码与contentType属性设置问题解决方案
Jan 07 Javascript
js调用浏览器打印模块实现点击按钮触发自定义函数
Mar 21 Javascript
jQuery中prependTo()方法用法实例
Jan 08 Javascript
JSON 的正确用法探讨:Pyhong、MongoDB、JavaScript与Ajax
May 15 Javascript
你不知道的 javascript【推荐】
Jan 08 Javascript
使用puppeteer破解极验的滑动验证码
Feb 24 Javascript
如何安装控制器JavaScript生成插件详解
Oct 21 Javascript
jQuery实现当拉动滚动条到底部加载数据的方法分析
Jan 24 jQuery
jQuery Migrate 插件用法实例详解
May 22 jQuery
JS+DIV实现拖动效果
Feb 11 Javascript
VueX模块的具体使用(小白教程)
Jun 05 Javascript
浅谈vue生命周期共有几个阶段?分别是什么?
Aug 07 Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 #Javascript
vue+高德地图写地图选址组件的方法
May 18 #Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 #Javascript
js实现图片推拉门效果代码实例
May 18 #Javascript
微信小程序代码上传、审核发布小程序
May 18 #Javascript
详解js中let与var声明变量的区别
Apr 05 #Javascript
webpack中如何加载静态文件的方法步骤
May 18 #Javascript
You might like
通过PHP CLI实现简单的数据库实时监控调度
2009/07/01 PHP
POSIX 风格和兼容 Perl 风格两种正则表达式主要函数的类比(preg_match, preg_replace, ereg, ereg_replace)
2010/10/12 PHP
php文档更新介绍
2011/07/22 PHP
Uncaught exception com_exception with message Failed to create COM object
2012/01/11 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
详解使用php-cs-fixer格式化代码
2020/09/16 PHP
Javascript base64编码实现代码
2011/12/02 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
2013/04/07 Javascript
基于JQuery 选择器使用说明介绍
2013/04/18 Javascript
JavaScript实现俄罗斯方块游戏过程分析及源码分享
2015/03/23 Javascript
javascript 实现map集合
2015/04/03 Javascript
js仿苹果iwatch外观的计时器代码分享
2015/08/26 Javascript
基于jQuery实现选取月份插件附源码下载
2015/12/28 Javascript
基于Bootstrap仿淘宝分页控件实现代码
2016/11/07 Javascript
Bootstrap CSS组件之大屏幕展播
2016/12/17 Javascript
Vue.js数据绑定之data属性
2017/07/07 Javascript
基于D3.js实现时钟效果
2018/07/17 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
[49:20]2014 DOTA2国际邀请赛中国区预选赛5.21 CIS VS TongFu
2014/05/22 DOTA
[01:26]DOTA2荣耀之路2:iG,China
2018/05/24 DOTA
Python二叉搜索树与双向链表转换实现方法
2016/04/29 Python
Python常见工厂函数用法示例
2018/03/21 Python
python正向最大匹配分词和逆向最大匹配分词的实例
2018/11/14 Python
django中账号密码验证登陆功能的实现方法
2019/07/15 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
Visual Studio Code搭建django项目的方法步骤
2020/09/17 Python
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
以下为Windows NT 下的32 位C++程序,请计算sizeof 的值
2016/12/07 面试题
致跳远运动员广播稿
2014/02/11 职场文书
工程管理英文求职信
2014/03/18 职场文书
施工工地安全标语
2014/06/07 职场文书
临床医学生职业规划书范文
2014/10/25 职场文书
律师函格式范本
2015/05/27 职场文书
结婚典礼主持词
2015/06/29 职场文书
发言稿之优秀教师篇
2019/09/26 职场文书