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


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级联下拉列表实例代码(自写)
May 10 Javascript
给文字加上着重号的JS代码
Nov 12 Javascript
JS获取农历日期具体实例
Nov 14 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
js实现微信分享代码
Oct 11 Javascript
JS中的数组方法笔记整理
Jul 26 Javascript
jQuery简单自定义图片轮播插件及用法示例
Nov 21 Javascript
js手机号4位显示空格,银行卡每4位显示空格效果
Mar 23 Javascript
iview table高度动态设置方法
Mar 14 Javascript
vue实现多个元素或多个组件之间动画效果
Sep 25 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
Jan 06 Javascript
Javascript异步流程控制之串行执行详解
Sep 27 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 中include()与require()的对比
2006/10/09 PHP
落伍首发 php+mysql 采用ajax技术的 省 市 地 3级联动无刷新菜单 源码
2006/12/16 PHP
php设计模式 DAO(数据访问对象模式)
2011/06/26 PHP
用PHP提取中英文词语以及数字的首字母的方法介绍
2013/04/23 PHP
PHP内置函数生成随机数实例
2019/01/18 PHP
prototype 的说明 js类
2006/09/07 Javascript
javascript编程起步(第五课)
2007/01/10 Javascript
简单的代码实现jquery定时器
2013/11/17 Javascript
js仿土豆网带缩略图的焦点图片切换效果实现方法
2015/02/23 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
关于JavaScript限制字数的输入框的那些事
2016/08/14 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
Angular2数据绑定详解
2017/04/18 Javascript
JS设置随机出现2个数字的实例代码
2017/07/19 Javascript
ionic App问题总结系列之ionic点击系统返回键退出App
2017/08/19 Javascript
微信小程序使用slider设置数据值及switch开关组件功能【附源码下载】
2017/12/09 Javascript
Angular中使用better-scroll插件的方法
2018/03/27 Javascript
JavaScript实现学生在线做题计时器功能
2018/12/05 Javascript
vue中的v-if和v-show的区别详解
2019/09/01 Javascript
基于jQuery实现可编辑的表格
2019/12/11 jQuery
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
Python3.2中Print函数用法实例详解
2015/05/19 Python
在Django中编写模版节点及注册标签的方法
2015/07/20 Python
Python星号*与**用法分析
2018/02/02 Python
Python实现基于KNN算法的笔迹识别功能详解
2018/07/09 Python
夏威夷咖啡公司:Hawaii Coffee Company
2019/09/19 全球购物
怎样在程序里获得一个空指针
2015/01/24 面试题
C#如何调用Windows程序打开一个文档
2014/12/26 面试题
路政管理专业个人自荐信范文
2013/11/30 职场文书
实习教师自我鉴定
2013/12/09 职场文书
村官工作鉴定评语
2014/01/27 职场文书
对孩子的寄语
2014/04/09 职场文书
工作求职自荐信
2014/06/13 职场文书
2015年前台个人工作总结
2015/04/03 职场文书
Python-typing: 类型标注与支持 Any类型详解
2021/05/10 Python