小程序搜索和历史搜索配合使用组件

拼搏现实的明天。 2022-04-10 11:23 199阅读 0赞

##### 效果图 #####

![2.gif][]

结合之前那篇通用搜索组件文章，这篇是在通用搜索组件的基础上加上了历史搜索列表和清空历史搜索功能；该组件结合了common-search组件和common-search-history组件；

##### 编写common-search-history组件 #####

common-search-history组件主要向外部提供一个list属性，用来存放需要展示的list记录和向外部提供两个事件回调方法onClickItem和onClickClear，其中onClickItem回调list的item点击事件，onClickClear回调的是点击了清空历史list事件  
common-search-history.js

"use strict";
    Component({
        properties: {
            list: {
                type: Array,
                value: [],
                observer: "onListChange"
            },        
        },
    
    
        data: {
        },
    
    
        methods: {
    
            onListChange: function onListChange() {
                this.setData({
                    list: this.data.list,
                });
            },
    
            /**
             * 点击Item
             * @param {*} e 
             */
            onClickItem: function onClickItem(e) {
                let data = e.currentTarget.dataset.item;
                this.triggerEvent('onClickItem', data);
            },
    
    
            /**
             * 点击清除历史
             * @param {*} e 
             */
            onClickClear: function onClickClear(e) {
                this.triggerEvent('onClickClearHistory', {});
            },
            
    
        }
    });

##### 编写common-search-and-history组件 #####

common-search-and-history组件向外部提供一个historyKey属性，该属性的主要作用是，标识该历史记录存储和获取在本地对应的key，然后内部处理了common-search组件的搜索回调和输入框内容变化回调来改变common-search-history组件的历史记录和控制common-search-history组件的展示和隐藏；  
使用该组件的时候主要给historyKey传值，组件内部会自己去读取本地使用该key存储的历史记录并展示出来，存储数据位置和效果图：  
![1546579623(1).jpg][1546579623_1_.jpg]

common-search-and-history.js

"use strict";
    Component({
        properties: {
            historyKey: {
                type: String,
                value: '',
                observer: "onHistoryKeyChange"
            },
        },
    
    
        data: {
            historyList: [],
            isHiddenHistory:false
        },
    
    
        methods: {
    
            onHistoryKeyChange: function onHistoryKeyChange() {
                this.setData({
                    historyKey: this.data.historyKey,
                });
                let _this = this;
                wx.getStorage({
                    key: this.data.historyKey,
                    success(res) {
                        if(res.data!=undefined&&res.data!=null&&res.data.length>0){
                            let historyList = JSON.parse(res.data);
                            _this.setData({
                                historyList:historyList
                            });
                        }
                    }
                  })
            },
    
            
            /**
             * 输入内容变化
             * @param {*} e 
             */
            onSearchInputChange: function onSearchInputChange(e) {
                this.setData({
                    isHiddenHistory:e.detail.content.length>0?true:false
                });
            },
    
            /**
             * 点击搜索
             * @param {*} e 
             */
            onClickSearchSubmit: function onClickSearchSubmit(e) {
                if (e.detail.content == '') {
                    return;
                }
                let isAddToHistoryList = true;
                this.data.historyList.forEach(function (value, index) {
                    if(e.detail.content==value){
                        isAddToHistoryList = false;
                    }
                });
                if(isAddToHistoryList){
                    this.data.historyList.push(e.detail.content);
                    this.setData({
                        historyList: this.data.historyList.slice(0, 5),
                    });
                    wx.setStorage({
                        key: this.data.historyKey,
                        data: JSON.stringify(this.data.historyList.slice(0, 5))
                    });
                }
                this.triggerEvent('onClickSubmit', { content: e.detail.content});
            },
    
            /**
             * 点击搜索历史item
             * @param {*} e 
             */
            onClickHistoryItem: function onClickHistoryItem(e) {
                this.setData({
                    isHiddenHistory: true,
                });
                this.triggerEvent('onClickSubmit', { content: e.detail});
            },
    
            /**
             * 点击清空历史搜索
             * @param {*} e 
             */
            onClickClearHistory: function onClickClearHistory(e) {
                this.setData({
                    historyList: [],
                });
                wx.setStorage({
                    key: this.data.historyKey,
                    data: JSON.stringify([])
                });
            },
    
    
    
        }
    });

common-search-and-history.wxml

代码详细地址：[https://github.com/fuxingkai/frankui-weapp][https_github.com_fuxingkai_frankui-weapp]

[2.gif]: /images/20220331/df3b0c60ce514584964936faa45c63eb.png
[1546579623_1_.jpg]: /images/20220331/856636682fdb455fa19a27b4beddca65.png
[https_github.com_fuxingkai_frankui-weapp]: https://github.com/fuxingkai/frankui-weapp