微信小程序搜索组件wxSearch

wxSearch优雅的微信小程序搜索框
一、功能
支持自定义热门key
支持搜索历史
支持搜索建议
支持搜索历史(记录)缓存
二、使用
1、将wxSearch文件夹整个拷贝到根目录下
2、引入

// wxml中引入模板
<import src="/wxSearch/wxSearch.wxml"/>
<template is="wxSearch" data="{{wxSearchData}}"/>
// wxss中引入 @import "/wxSearch/wxSearch.wxss";

3、使用3.1 wxml文件这里有两种模板：一种为wxSearch作者提供的模板，另一种是weui提供的模板。
3.1.1 第一种模板

//  wxSearch作者提供的模板
<import src="/wxSearch/wxSearch.wxml"/>
<view class="wxSearch-section">
<view class="wxSearch-pancel">
<input bindinput="wxSearchInput" bindfocus="wxSerchFocus" value="{{wxSearchData.value}}" bindblur="wxSearchBlur" class="wxSearch-input" placeholder="搜索" />
<button class="wxSearch-button" bindtap="wxSearchFn" size="mini" plain="true">搜索</button>
</view>
</view>
<template is="wxSearch" data="{{wxSearchData}}"/>

3.1.2 第二种模板

<import src="../../wxSearch/wxSearch.wxml"  />
<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="搜索" value="{{wxSearchData.value}}"                 bindfocus="wxSerchFocus" bindinput="wxSearchInput" bindblur="wxSearchBlur"  />          <view class="weui-icon-clear" wx:if="{{inputVal.length > 0}}" bindtap="clearInput">              <icon type="clear" size="14"></icon>          </view>      </view>  </view>
</view>
<template is="wxSearch" data="{{wxSearchData}}"  />

注意：此模板需要使用weui.wxss文件，请在app.wxss文件中引入。

搜索框效果图2.png
3.1.3 自定义搜索框如果上面两种搜索样式都不喜欢，你也可以自己定义，只需要保证事件的触发即可。

// 搜索输入框需要保证下面三个事件的书写正确
<input bindfocus="wxSerchFocus" bindinput="wxSearchInput" bindblur="wxSearchBlur" />
// 搜索按钮的事件 <button bindtap="wxSearchFn"/>

3.2 js文件

wxSearchFn: function(e){var that = thisWxSearch.wxSearchAddHisKey(that);},wxSearchInput: function(e){var that = thisWxSearch.wxSearchInput(e,that);},wxSerchFocus: function(e){var that = thisWxSearch.wxSearchFocus(e,that);},wxSearchBlur: function(e){var that = thisWxSearch.wxSearchBlur(e,that);},wxSearchKeyTap:function(e){var that = thisWxSearch.wxSearchKeyTap(e,that);},wxSearchDeleteKey: function(e){var that = thisWxSearch.wxSearchDeleteKey(e,that);},wxSearchDeleteAll: function(e){var that = this;WxSearch.wxSearchDeleteAll(that);},wxSearchTap: function(e){var that = thisWxSearch.wxSearchHiddenPancel(that);}

3.3 效果图

三、源码解读

module.exports = {init: init,initColor: initColors,initMindKeys: initMindKeys,wxSearchInput: wxSearchInput,wxSearchFocus: wxSearchFocus,wxSearchBlur: wxSearchBlur,wxSearchKeyTap: wxSearchKeyTap,wxSearchAddHisKey:wxSearchAddHisKey,wxSearchDeleteKey:wxSearchDeleteKey,wxSearchDeleteAll:wxSearchDeleteAll,wxSearchHiddenPancel:wxSearchHiddenPancel
}
init 初始化wxSearch参数:that var that = this后传入即可
barHeight 搜索框高度 根据你设定的搜索框高度进行设定
keys 数组 热门搜索的显示内容
isShowKey 是否显示热门搜索 默认显示(false即可不显示)
isShowHis 是否显示历史搜索 默认显示(false即可不显示)
callBack 回调函数
源码做了什么
初始化了wxSearchData的内容wxSearchData:{        view:{             isShow: false, //是否显示搜索界面，默认隐藏，当输入框获取焦点时显示searchbarHeght: 20, //根据手机屏幕高度和传入的barHeight进行计算isShowSearchKey: true,  //默认为true        isShowSearchHistory: true, //默认为true        }        keys:[],//自定义热门搜索，传入的keys        his:[],//历史搜索关键字，从缓存中获取        value: ''  // 搜索内容      }
wxSearch.init(that, barHeight, keys, isShowKey, isShowHis, callBack)；
initMindKeys 初始化mindKeys
// mindKeys即为所要检索内容的集合 var mindKeys = ['weappdev.com','微信小程序开发','微信开发','微信小程序']; WxSearch.initMindKeys(mindKeys);

其他事件函数不再赘述，可能会有一些bug，可以根据情况自己进行修改。

相关文章：
- 杨小事：微信小程序实战（二）：实现搜索页面
- 知乎Live全文搜索之微信小程序实战《一》
- 知乎Live全文搜索之微信小程序实战(二)
- 微信小程序入门《四》本地缓存和搜索（附源码）

微信小程序搜索组件wxSearch相关推荐

微信小程序 MinUI 组件库系列之 abnor 异常流组件
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...
小白如何上手几款微信小程序UI组件库
文章目录 1. 环境信息 2. GO 2.1 新建项目 2.2 使用WeUI微信官方组件 2.21. 命令行进入该项目文件夹 2.22. npm初始化 2.23. npm安装该组件包 2.24.npm ...
微信小程序 MinUI 组件库系列之 abnor 异常流组件 1
MinUI 是基于微信小程序自定义组件特性开发而成的一套简洁.易用.高效的组件库,适用场景广,覆盖小程序原生框架.各种小程序组件主流框架等,并且提供了高效的命令行工具.MinUI 组件库包含了很多功能 ...
vue uniapp 微信小程序搜索下拉框模糊搜索
vue uniapp 微信小程序搜索下拉框模糊搜索话不多说直接贴代码 template <template><view class="index"> ...
微信小程序搜索框实现模糊查询
目录前言一.概述二.步骤三.效果展示总结前言主要实现功能,无美化,如需请自设一.概述开发工具:微信开发者工具通过对微信原生组件input绑定事件实现对已获取的列表元素模糊查询的操作 ...
微信小程序自定义组件的基本使用
微信小程序自定义组件的基本使用组件与模块类似,实现了功能的复用,提高开发速率,减少代码量在开发过程中 , 总会遇到一些功能板块是相同或很类似的 .如两个不同页面都有搜索框 , 或者导航栏等 . ...
微信小程序UI组件的推荐以及使用
小编今天写一个微信小程序的界面,之前都是使用原声的编写页面,按照设计图编写.但是这次是编写一个微信小程序的时间选择器,让小编我自由发挥,没有设计稿(复杂的设计稿小编也是写不出来的,比如好看实用的时间选 ...
微信小程序image组件开发程序以及相关图片问题参考资料汇总
微信小程序image组件开发程序以及相关图片问题参考资料汇总,希望对大家小程序开发能有一定的参考和借鉴价值.以下汇总主要涉及到微信小程序image组件有关资源路径.缩放和剪裁模式等进行的探讨,无论是对 ...
小程序子组件向父组件传值_一套组件化、可复用、易扩展的微信小程序 UI 组件库...
如何使用 Wux Weapp 是一套组件化.可复用.易扩展的微信小程序 UI 组件库.在开始使用之前,需要先阅读微信小程序自定义组件的相关文档. 通过 npm 安装,需要依赖小程序基础库 2.2.1 ...

微信小程序搜索组件wxSearch

微信小程序搜索组件wxSearch

微信小程序搜索组件wxSearch相关推荐

最新文章

热门文章