小程序搜索框的实现和搜索历史记录的实现

这段时间自学小程序编程，从组件到API的学习后，编写的第一个较为综合的小案列，编写搜索框对初学者来说最重要也是最难理解的就是定位和布局：position和display，大家一定要先把这两个属性理解透彻。这里暂时没有写点击各组件之后对应的事件，

.wxml

.mxss

————————————

• 2.也可以利用label组件让搜索框看着更高级一点，如下

 

.wxml

这里定义的bindtap事件，即点击之后label隐藏

.wxss

 

• 三，搜索历史记录的实现
• history.unshift is not a function; [Component] Event Handler Error @ pages/index/index#bound bindInputConfirm
  TypeError: history.unshift is not a function遇到这个错误是因为history的数据类型不是数组，
• 下面的程序实现历史框，但是有一个逻辑存在问题暂时没能解决，就是当清除搜索记录后，点击搜索框，搜索框会显示出来，总找不到原因

.wxss

 

.js

• Page({

    data: {

      labelShowed:false, //label组件的隐藏

      inputValue:"", //输入框的初始内容

      historyValue:[],//存储的历史数据

      history_flag:false,//历史框的显示

    },

    bindLabelShowed:function(){

      this.setData({

        labelShowed:true

      });

    },

    //输入完成确认，并且储存搜索的内容，后续显示在历史窗口

    bindInputConfirm:function(e){

      var value = e.detail.value;

      var history = this.data.historyValue || []; //保证history是数组类型，否则unshitt()会出错，特别是适用wx.removeStorageSync的时候

      //如果输入内容为空是执行

      if( value == ""){

        wx.showToast({

          title: '请输入内容',

        });

        setTimeout(() =>{

          this.setData({

            showToast:false

          });

        },1500);

      }

      //如果不为空执行

      else{

        history.unshift(value); //输入数据放到historyValue数组中

        wx.setStorageSync('history', history)//存储数据

        this.setData({

          historyValue:history,

          history_flag:true, 

        })

      };

     

      console.log(wx.getStorageSync('history'));

        },

    //清除输入框内容

    bindClearInput:function(){

      this.setData({

        inputValue:"",

      })

    },

   

    bindfocus:function(e){

      console.log(e);

      // var value =wx.getStorageSync('history');

      console.log("-----value---");

      console.log(wx.getStorageSync('history'));

      if( wx.getStorageSync('history') !== ""||[]){

        this.setData({

          history_flag:true,

        })

      }else{

        this.setData({

          history_flag:false,

        })

      }

        },

  //清除历史数据，注意这里是给historyValue为空，后面使用unshift

    bindClearHistory:function(){

      wx.removeStorageSync("history")

      this.setData({

        historyValue:"",

        history_flag:false,

      })

    },

  //输入框获取焦点，显示历史数据

    bindInput:function(){

      this.setData({

        history_flag:true,

      })

    },

  //删除history的数据

    bindDeleteHistory:function(e){

      console.log(e)

      var history = this.data.historyValue;

      var id = e.currentTarget.id;

      var newHistory = [];

      var temp = 0;

        for( let i = 0; i < history.length; i++){

   

        if( history.length == 1 && i == 0){

          this.setData({

            historyValue:"",

            history_flag:false,

          })

        }

        if(i == id){

          continue;

        }

        newHistory[temp] = history[i];

        temp++;

        this.setData({

          historyValue:newHistory,

        })

      }

    },

    //事件处理函数

    bindViewTap: function() {

      wx.navigateTo({

        url: '../logs/logs'

      })

    },

    onLoad: function () {

     var history = wx.getStorageSync('history')||[];

     this.setData({

       historyValue:history,

     })

    },

  })