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


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 相关文章推荐
用javascript连接access数据库的方法
Nov 17 Javascript
JQuery 绑定事件时传递参数的实现方法
Oct 13 Javascript
jquery实现excel导出的方法
Apr 04 Javascript
Node.js中使用计时器定时执行函数详解
Aug 15 Javascript
JavaScript中5种调用函数的方法
Mar 12 Javascript
jQuery 翻页组件yunm.pager.js实现div局部刷新的思路
Aug 11 Javascript
javascript replace()第二个参数为函数时的参数用法
Dec 26 Javascript
jquery 正整数数字校验正则表达式
Jan 10 Javascript
mac上配置Android环境变量的方法
Jul 08 Javascript
JS实现图片轮播效果实例详解【可自动和手动】
Apr 04 Javascript
深入了解JavaScript 私有化
May 30 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 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中PDO的错误处理
2011/09/04 PHP
PHP面向对象三大特点学习(充分理解抽象、封装、继承、多态)
2012/05/07 PHP
PHP数组传递是值传递而非引用传递概念纠正
2013/01/31 PHP
PHP设计模式之解释器模式的深入解析
2013/06/13 PHP
php+mysqli批量查询多张表数据的方法
2015/01/29 PHP
学习thinkphp5.0验证类使用方法
2017/11/16 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
Yii框架响应组件用法实例分析
2019/09/04 PHP
用jQuery模拟页面加载进度条的实现代码
2011/12/19 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
网站404页面3秒后跳到首页的实例代码
2013/08/16 Javascript
原始的js代码和jquery对比体会
2013/09/10 Javascript
JSF中confirm弹出框的用法示例介绍
2014/01/07 Javascript
跟我学Nodejs(一)--- Node.js简介及安装开发环境
2014/05/20 NodeJs
一个php+js实时显示时间问题
2015/10/12 Javascript
lhgcalendar时间插件限制只能选择三个月的实现方法
2017/07/03 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
React.js绑定this的5种方法(小结)
2018/06/05 Javascript
微信小程序实现的日期午别医生排班表功能示例
2019/01/09 Javascript
javascript实现下拉菜单效果
2021/02/09 Javascript
[46:20]DOTA2-DPC中国联赛 正赛 PSG.LGD vs LBZS BO3 第二场 1月22日
2021/03/11 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
python 在某.py文件中调用其他.py内的函数的方法
2019/06/25 Python
Python Pandas 获取列匹配特定值的行的索引问题
2019/07/01 Python
如何使用canvas绘制可移动网格的示例代码
2020/12/14 HTML / CSS
日本订房网站,预订日本星级酒店/温泉旅馆:Relux(支持中文)
2020/01/03 全球购物
费用会计岗位职责
2014/01/01 职场文书
学雷锋月活动总结
2014/04/25 职场文书
三关爱志愿服务活动方案
2014/08/17 职场文书
个人总结与自我评价
2014/09/18 职场文书
学院党的群众路线教育实践活动整改方案
2014/10/04 职场文书
学校法制宣传日活动总结
2014/11/01 职场文书
道德与公民自我评价
2015/03/09 职场文书
党员公开承诺书2016
2016/03/24 职场文书
导游词之天津盘山
2019/11/01 职场文书
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python