微信小程序搜索框加跳转

样式如下图
一般情况下

获得焦点时（出现可供搜索列表和取消键）

搜索关键字时（关键字在列表中）

搜索关键字时（关键字不在列表中）

html

 <!-- 搜索框 --><!-- 一般情况下 --><view class='search' wx:if="{{!focus}}"> <image class='search_icon' src='/icon/search.png' mode='aspectFit'></image><input class='sou_input' type="text" placeholder='请输入关键字' placeholder-class="sou_text" confirm-type="search" bindfocus="focusHandler"/></view><!-- 获得焦点时多一个取消icon --><view class='search' id="asearch" wx:if="{{focus}}"> <image class='search_icon' src='/icon/search.png' mode='aspectFit'></image><input class='sou_input' type="text"  placeholder='请输入关键字' placeholder-class="sou_text" value="{{inputValue}}" confirm-type="search" bindinput='query' /><image class='search_cancel' src='/icon/cancel.png' mode="aspectFit" bindtap="cancelHandler"></image></view><!-- 搜索结果显示框 --><scroll-view wx:if="{{focus}}" class="scrollview" scroll-y="true"><view wx:for="{{list}}" wx:key="name"><view class="scrollItem"><text class="font1" space="nbsp">   {{item.name}}</text></view></view></scroll-view>

/* 搜索框 */
.search {left: 74rpx;top: 16rpx;position: absolute;display: flex;border-radius: 30rpx;width: 604rpx;height: 60rpx;background-color:rgba(255, 255, 255, 0.5);align-items: center;line-height: 60rpx;
}
#asearch {border-radius: 30rpx 30rpx 0rpx 0rpx;
}
.sou_text{font-size: 24rpx;font-weight: 400;color: #ffffff;text-align: center;}
.search_icon {width: 36rpx;height: 60rpx;line-height: 60rpx;display: inline-block;margin-left: 26rpx;
}
.search_cancel {width: 36rpx;height: 60rpx;display: inline-block;margin-left: 180rpx;margin-right: 26rpx;
}
.sou_input {position: relative;width: 300rpx;display: inline-block;height: 60rpx;font-size: 30rpx;
}
/* 搜索框下拉 */
.scrollview {position: absolute;width: 604rpx;height: 240rpx;left: 74rpx;top: 76rpx;border-radius:0rpx 0rpx 30rpx 30rpx;font-size: 24rpx;font-weight: 400;color: #ffffff;background-color:rgba(255, 255, 255, 0.5);line-height: 60rpx;
}
.scrollItem:hover {background-color:rgba(255, 255, 255, 0.281);
}

js代码

data: {focus:false, //是否显示取消键inputValue:"",list: [{'name':'花香型香氛'},{'name':'玫瑰精油'},{'name':'依兰精油'},{'name':'橙花精油'},{'name':'柑橘型香氛'},{'name':'佛手柑精油'},{'name':'葡萄柚精油'},{'name':'柠檬精油'},{'name':'木香型香氛'},{'name':'杉木精油'},{'name':'松木精油'},{'name':'檀香木精油'},{'name':'龙涎香'},{'name':'海狸香'},{'name':'麝香'},{'name':'薰衣草香'},{'name':'鸢尾香'},{'name':'迷迭香'}], //搜索到的结果list2: [{'name':'花香型香氛'},{'name':'玫瑰精油'},{'name':'依兰精油'},{'name':'橙花精油'},{'name':'柑橘型香氛'},{'name':'佛手柑精油'},{'name':'葡萄柚精油'},{'name':'柠檬精油'},{'name':'木香型香氛'},{'name':'杉木精油'},{'name':'松木精油'},{'name':'檀香木精油'},{'name':'龙涎香'},{'name':'海狸香'},{'name':'麝香'},{'name':'薰衣草香'},{'name':'鸢尾香'},{'name':'迷迭香'}], //可供查询的记录},focusHandler (e) {this.setData({focus:true});},cancelHandler (e) {this.setData({focus:false})},query(e){this.setData({inputValue: e.detail.value})  //显示输入的字符串//实现搜索的功能var list = this.data.list2;       //先把第二条json存起来var list2 = [];      for(var i=0;i<list.length;i++){var string = list[i].name;//查询json里的name是否包含搜索的关键词，如果有就把他装进list2数组if(string.indexOf(e.detail.value) >= 0){list2.push(list[i]);}}//循环结束，判断是否查询到关键字，如果没有显示提示语if(list2.length == 0){list2 = [{'name':'您输入的产品尚未被录入'}]}//到这里list2是你查出的数据//如果输入的关键词为空就加载原来的全部数据，不是空就加载搜索到的数据if(e.detail.value == ""){//加载全部this.setData({list: list})} else {this.setData({list: list2})} },

微信小程序搜索框加跳转相关推荐

html打开微信搜索页,微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)...
上效果图: 一:搜索框功能实现 1.在首页做一个搜索框的样式并实现跳转到搜索页面搜索 .search{ width: 80%; } .search_arr { border: 1px solid # ...
微信小程序搜索框回车搜索事件
这里写的是在微信小程序里的搜索框,按软键盘回车键触发搜索事件. 首先前台代码,这是整个搜索框代码 <view class="weui-search-bar"><v ...
微信小程序搜索框实现模糊查询
目录前言一.概述二.步骤三.效果展示总结前言主要实现功能,无美化,如需请自设一.概述开发工具:微信开发者工具通过对微信原生组件input绑定事件实现对已获取的列表元素模糊查询的操作 ...
微信小程序————搜索框获取本地缓存搜索记录
微信小程序获取本地缓存的搜索记录 html  //这里是搜索框 <view class="box_search">< ...
微信小程序搜索框自动补全功能
▶动态效果图◀ ▶效果涉及到的input属性◀ focus Boolean false 获取焦点 bindinput EventHandle ...
微信小程序搜索框以及简单的页面内容搜索的实现
1 效果先来看一下效果 2 设计思路 2.1 显示效果的设计本示例包含两种不同的搜索框,第一种搜索框是在最初状态下显示的搜索框,它由一个输入框input和一个表示"搜索"的图片 ...
微信小程序--搜索框样式总结
首先配置app.json文件配置相应路径:编译后生成相应文件夹.及文件夹内的4个文件,一个文件夹即一个页面.: 所有的js方法都是用bindtap(点击事件)调用的.例:搜索(点击搜索调用a方法) ...
微信小程序--搜索框样式及form提交实现
搜索框样式及form提交实现第一种风格 .js bt_search(e){console.log('搜索',e)}, .wxml <form bindsubmit="bt_sear ...
微信小程序搜索框组件之SearchBar
index.wxml  <view class="wrapper"><slot></slot><vi ...

微信小程序搜索框加跳转

微信小程序搜索框加跳转相关推荐

最新文章

热门文章