微信小程序(8)搜索页以及历史记录管理

1. 效果

1. 逻辑

界面初始化调接口获取两部分数据：

1. 搜索框默认的搜索placeholder： 下面 自由自在...
2. 热搜榜数据： 前20条热搜数据
3. 获取本地存的历史搜索记录 historyList

搜索框输入文字事件：

1. 调用接口根据关键字搜索音乐
2. 判断搜索记录是否有对应关键字，如果有就将其移到数组前面、否则加到数组第一个
3. 搜索记录存到本地

2. 界面展示

2. 核心知识点

1. 本地数据存储与获取

获取

    let historyList = wx.getStorageSync('searchHistory');
    if(historyList){
      this.setData({
        historyList
      })
    }

存储

wx.setStorageSync('searchHistory', historyList)

2. 搜索框placeholder 文字样式设置

1. wxml 设置placeholder-class
<input type="text" value="{{searchContent}}" placeholder="{{placeholderContent}}" placeholder-class="placeholder" bindinput="handleInputChange"/>
2. wxss 设置样式
.placeholder{
  /*color: #d43c33;*/
  font-size: 28rpx;
}

3. 搜索框内容改变事件

1. wxml 绑定事件
<input type="text" value="{{searchContent}}" placeholder="{{placeholderContent}}" placeholder-class="placeholder" bindinput="handleInputChange"/>
2. js 事件
	  // 表单项内容发生改变的回调
   handleInputChange(event){
    // console.log(event);
    // 更新searchContent的状态数据
    this.setData({
      searchContent: event.detail.value.trim()
    })
     if(isSend){
       return
     }
     isSend = true;
     this.getSearchList();
     // 函数节流
    setTimeout( () => {
      isSend = false;
    }, 300)
    
  },