通过小程序实现搜索框动态效果，默认静态显示搜索框，搜索按钮及提示文字居中。点击搜索框搜索按钮及input框动态居左并获取焦点。失去焦点时，恢复之前的显示状态
2021-08-06 00:45:34
6KB
1
searchUI :magnifying_glass_tilted_left:
微信小程序优雅的搜索框
特性
不吹不黑-我们的界面UI还是蛮漂亮的
支持搜索历史
支持搜索历史（记录）缓存
支持热门搜索
支持删除搜索记录、清空搜索记录
##计划
searchUI 2.0
将封装为组件的方式，替代template模板方式，耦合性更好，方便引用
效果
使用
1.将component下的wxSearch放入项目中
2.引入wxSearch的方法
```js
import * as wxSearch from '../../component/wxSearch/wxSearch';
onLoad: function (options) {
//初始渲染-读取storage的历史记录
wxSearch.init(this)
}
```
3.引入wxSearch的模板文件
```js
<import src="/com
2021-04-18 18:20:52
60KB
1
用户对搜索出来的list点击后,去到下一个页面,但是也会把当前数据在当前页面做成一个历史记录,如果点击历史对应的标签会,把带着当时存下来的Id跳到detail页面
2021-04-09 15:00:23
52KB
1
上效果图:
一:搜索框功能实现
1.在首页做一个搜索框的样式并实现跳转到搜索页面
<input class= disabled placeholder=请输入关键字 value={{searchValue}}/>
<view clas
2021-04-08 20:09:14
107KB
1
效果图
(此图片来源于网络，如有侵权，请联系删除! )
(此图片来源于网络，如有侵权，请联系删除! )
组件结构
为组件设置一个容器，在容器中放置搜索图标、输入框、清除文字按钮和搜索按钮。
(此图片来源于网络，如有侵权，请联系删除! )
<input
placeholder='{{placeholder}}'
2021-03-29 18:12:20
210KB
1
参见博客https://blog.csdn.net/weixin_44509533/article/details/113447030
2021-02-18 11:10:15
3KB
1