# wxSearch
- 🔍 微信小程序优雅的搜索框
## 来源
## wxParse信息
* 版本号`0.1`
* github地址: [https://github.com/icindy/wxSearch](https://github.com/icindy/wxSearch)
## 开发信息
[微信小程序开发论坛](http://weappdev.com)
垂直微信小程序开发交流社区
![小码消息](images/qr.PNG)
## 特性
- [x] 支持自定义热门key
- [x] 支持搜索历史
- [x] 支持搜索建议
- [x] 支持搜索历史(记录)缓存
## 效果
![wxSearch效果gif1](screenshoot/wxSearch1.gif)
![wxSearch效果gif2](screenshoot/wxSearch2.gif)
## 使用
* 引入
```
// 模版引入
<import src="/wxSearch/wxSearch.wxml"/>
<template is="wxSearch" data="{{wxSearchData}}"/>
// wxss中引入
@import "/wxSearch/wxSearch.wxss";
```
* 使用
```
//wxSearch 暴漏的接口
module.exports = {
init: init,
initColor: initColors,
initMindKeys: initMindKeys,
wxSearchInput: wxSearchInput,
wxSearchFocus: wxSearchFocus,
wxSearchBlur: wxSearchBlur,
wxSearchKeyTap: wxSearchKeyTap,
wxSearchAddHisKey:wxSearchAddHisKey,
wxSearchDeleteKey:wxSearchDeleteKey,
wxSearchDeleteAll:wxSearchDeleteAll,
wxSearchHiddenPancel:wxSearchHiddenPancel
}
```
```
//初始化
onLoad: function () {
console.log('onLoad')
var that = this
//初始化的时候渲染wxSearchdata 第二个为你的search高度
WxSearch.init(that,43,['weappdev','小程序','wxParse','wxSearch','wxNotification']);
WxSearch.initMindKeys(['weappdev.com','微信小程序开发','微信开发','微信小程序']);
},
```
```
wxSearchFn: function(e){
var that = this
WxSearch.wxSearchAddHisKey(that);
},
wxSearchInput: function(e){
var that = this
WxSearch.wxSearchInput(e,that);
},
wxSerchFocus: function(e){
var that = this
WxSearch.wxSearchFocus(e,that);
},
wxSearchBlur: function(e){
var that = this
WxSearch.wxSearchBlur(e,that);
},
wxSearchKeyTap:function(e){
var that = this
WxSearch.wxSearchKeyTap(e,that);
},
wxSearchDeleteKey: function(e){
var that = this
WxSearch.wxSearchDeleteKey(e,that);
},
wxSearchDeleteAll: function(e){
var that = this;
WxSearch.wxSearchDeleteAll(that);
},
wxSearchTap: function(e){
var that = this
WxSearch.wxSearchHiddenPancel(that);
}
```
没有合适的资源?快使用搜索试试~ 我知道了~
搜索框.rar
共53个文件
js:10个
wxss:8个
png:6个
需积分: 0 0 下载量 123 浏览量
2024-08-04
18:53:15
上传
评论
收藏 1.3MB RAR 举报
温馨提示
小程序的设计源码通常包含多个文件和文件夹,组织结构清晰,以便开发者能够快速上手并进行定制化开发。主要文件和文件夹包括: 页面文件夹:存放小程序的各个页面,每个页面通常由.wxml、.wxss、.js和.json文件组成。WXML文件负责页面的结构,类似于HTML;WXSS文件负责样式,类似于CSS;JS文件负责页面的逻辑和交互;JSON文件用于页面的配置,如导航栏标题等。 组件文件夹:存放可复用的UI组件。组件与页面类似,也由.wxml、.wxss、.js和.json文件组成。通过组件化设计,可以提高代码的复用性和维护性,减少重复工作。 静态资源文件夹:存放图片、音频、视频等静态资源,便于在小程序中引用。这些资源通常放在一个名为assets或static的文件夹中。 配置文件:小程序的根目录下通常有一个app.json文件,用于全局配置,如页面路径、导航栏样式、底部Tab栏等。此外,还有app.wxss和app.js文件,分别用于全局样式和全局逻辑。 工具文件夹:存放一些工具函数和库文件,便于在小程序中调用。这些文件通常放在一个名为utils的文件夹中。
资源推荐
资源详情
资源评论
收起资源包目录
搜索框.rar (53个子文件)
搜索框
详细图文文档教程.doc 975KB
源码导入文档教程.docx 182KB
搜索框
pages
index
index.wxml 774B
index.js 1KB
index.wxss 34B
logs
logs.json 56B
logs.js 280B
logs.wxml 194B
logs.wxss 114B
app.json 268B
screenshoot
wxSearch2.gif 85KB
wxSearch1.gif 165KB
app.js 719B
LICENSE 1KB
utils
util.js 481B
app.wxss 103B
images
logo.png 8KB
qr.PNG 47KB
README.md 2KB
wxSearch
wxSearch.wxss 1KB
wxSearch.wxml 2KB
images
wxSearch-icon-delete.png 3KB
wxSearch.js 5KB
__MACOSX
._搜索框 212B
搜索框
pages
index
._index.wxml 212B
._index.js 212B
._index.wxss 212B
._logs 212B
logs
._logs.js 212B
._logs.json 212B
._logs.wxml 212B
._logs.wxss 212B
._index 212B
screenshoot
._wxSearch2.gif 212B
._wxSearch1.gif 212B
._screenshoot 212B
._app.js 212B
._app.wxss 212B
._app.json 212B
._images 212B
utils
._util.js 212B
._LICENSE 212B
._utils 212B
._wxSearch 212B
._README.md 212B
images
._qr.PNG 212B
._logo.png 212B
._pages 212B
wxSearch
._images 212B
._wxSearch.js 212B
._wxSearch.wxml 212B
images
._wxSearch-icon-delete.png 212B
._wxSearch.wxss 212B
共 53 条
- 1
资源评论
零度°
- 粉丝: 1810
- 资源: 1695
上传资源 快速赚钱
- 我的内容管理 展开
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
最新资源
- 多路转接之select(fd-set介绍,参数详细介绍),实现非阻塞式网络通信
- 查看硬件信息的工具文件
- 尚硅谷大数据Hadoop原版课堂笔记
- Iphlpapi.h和Iphlpapi.lib
- Spark与Spark SQL调优指南
- 大模型备案流程,准备资料要点讲解
- MATLAB代码:考虑电动汽车负荷随机性的蓄电池容量优化配置 关键词:蓄电池容量优化配置 储能优化配置 中长期配置 并网波动
- 智慧水务解决方案(智慧河流)
- 线控制动系统仿真 Carsim和Simulink联合仿真线控制动系统BBW-EMB系统 包含简单的制动力分配和四个车轮的线控
- 三相并网逆变器双闭环控制,电网电流外环电容电流内环控制算法,matlab Simulink仿真模型,有源阻尼,单位功率因数,电网
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功