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)
},【当你用心写完每一篇博客之后,你会发现它比你用代码实现功能更有成就感!】