【微信小程序学习】搜索音乐页面代码实现

这里记录一下搜索页面的代码，总结复习一下。

搜索音乐的界面有几个重点：

   1、搜索框placeholder的后端数据接收

   2、热搜榜的格式及数据接收

   3、搜索框内容中输入内容，出现搜索展示界面，并且此时隐藏热搜榜和历史记录

   4、历史记录显示，可以删除

 

HTML代码及要点

  
    
      
      
      
    
    取消
  
  
  
   
   
     搜索内容：{{searchContent}}
      
         
            
            {{item.name}}
         
      
   
  

  
   
     
      历史
      
        {{item}}
      
      
      
    

   
   
    热搜榜
    
    
      
         {{index + 1}}
         {{item.searchWord}}
         
      
    
   
  

HTML要点：

这里利用了block标签，可以把包围的内容当做一个整体，这里利用了wx:if和wx:else来动态的隐藏和显示搜索内容板块和历史记录及热搜榜。

placeholder-class的标签可以直接修改placeholder的样式，bindinput回调就是代表输入框中输入内容时就会调用。

这里没用wx:if ，利用的是hidden，可以优化性能。当搜索框内没有搜索内容时，就会隐藏X号。

对比：1. wx:if 等同于 v-if, 条件为 false 的时候不加载，条件切换的时候决定元素销毁或者 重新加载渲染 2. hidden 等同于 v-show, 始终加载元素, 条件切换的时候决定元素的显示和隐藏

 CSS代码及要点

/* pages/search/search.wxss */
.searchContainer{
  padding: 0 20rpx;
}
/* 头部 */
.header{
  display: flex;
  height: 60rpx;
  line-height: 60rpx;
  padding: 10rpx;
}

.searchInput{
  position: relative;
  flex:1;
  background: rgba(237,237,237,0.3);
  border-radius: 30rpx;
}
.clear{
  position: absolute;
  right: 30rpx;
  z-index: 10;
  top:0;
  font-size: 30rpx;
}

.cancel{
  width: 100rpx;
  text-align: center;
}

.searchIcon{
  position: absolute;
  left: 15rpx;
}
.searchInput input{
  margin-left: 50rpx;
  height: 60rpx;
}
.placeholder{
  /* color: #d43c33; */
  font-size: 28rpx;
}

/* 热搜榜 */
.hotContainer .title{
  font-size: 28rpx;
  height: 80rpx;
  line-height: 80rpx;
  border-bottom: 1rpx solid #eee;
}
.hotList{
  display: flex;
  flex-wrap: wrap;
}

.hotItem{
  width: 50%;
  height: 80rpx;
  line-height: 80rpx;
  font-size: 26rpx;
}

.hotItem .order{
  margin: 0 10rpx;
}
.hotItem .iconImg{
  width: 35rpx;
  height: 20rpx;
  margin-left: 10rpx;
}

/* 搜索内容展示 */
.searchContent{
  color: rgba(107,100,238,0.96);
  height: 80rpx;
  line-height: 80rpx;
  font-size: 24rpx;
  border-bottom: 1rpx solid #d43c33;

}

.searchItem{
  height: 80rpx;
  line-height: 80rpx;
  display: flex;
}
 
.searchItem .content{
  flex: 1;
  margin-left: 20rpx;
  border-bottom: 1rpx solid #eee;
  font-size: 26rpx;
}


/* 搜索历史 */
.history {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  line-height:  50rpx;
  margin: 20rpx 0;
}


.history .title {
  font-size: 28rpx;
  height: 50rpx;

}

.history .historyItem {
  height: 50rpx;
  font-size: 26rpx;
  background: #ededed;
  margin-left: 20rpx;
  padding: 0 30rpx;
  border-radius: 20rpx;
  margin-bottom: 20rpx;
}

.history .delete {
  position: absolute;
  bottom: 10rpx;
  right: 15rpx;
  font-size: 36rpx;
}

CSS要点：

flex-wrap：wrap   wrap为允许换行 

JS代码及要点 

// pages/search/search.js
import request from '../../utils/request'
let isSend = false;  //函数节流使用
Page({

  /**
   * 页面的初始数据
   */
  data: {
    placeholderContent:'', //placeholder的数据
    hotList:[], //热搜榜数据
    searchContent:'',  //用户输入的表单项数据
    searchList:[], //关键字模糊匹配的数据
    historyList:[], //搜索历史记录
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
     //获取初始化数据
    this.getInitData();

    //获取历史记录
    this.getSearchHistory();
  },

  //获取初始化的数据
  async getInitData(){
    let placeholderData = await request('/search/default')
    let hotListData = await request('/search/hot/detail')
    this.setData({
      placeholderContent:placeholderData.data.showKeyword,
      hotList:hotListData.data
    })
  },

  //获取本地历史记录的功能函数
  getSearchHistory(){
   let historyList =  wx.getStorageSync('searchHistory')
    if (historyList){
      this.setData({
        historyList
      })
    }
  },


  //表单项内容发生改变的回调
   handleInputChange(event){
    console.log(event)
   //更新searchContent的状态数据
   this.setData({
     searchContent:event.detail.value.trim()
   })
   if (isSend) {
       return
   }
   isSend = true;
   this.getSearchList();
   //函数节流
   setTimeout(async()=>{
     isSend=false;
   },300)
  },

  //获取搜索数据的功能函数
  async getSearchList(){
    if (!this.data.searchContent){
      this.setData({
        searchList:[]  //搜索框内无内容搜索展示部分显示为空
      })
      return; 
    }
    let { searchContent, historyList } = this.data
    //发请求获取关键字模糊匹配数据
    let searchListData = await request('/search', { keywords: searchContent, limit: 10 });
    this.setData({
      searchList: searchListData.result.songs
    })
    //将搜索的关键字添加到搜索历史记录中
    if (historyList.indexOf(searchContent)!==-1){
      historyList.splice(historyList.indexOf(searchContent), 1)
      
    }
    historyList.unshift(searchContent)
    this.setData({
      historyList
    })
    wx.setStorageSync('searchHistory',historyList)
  },   
  
  //清空搜索内容
  clearSearchContent(){
    this.setData({
      searchContent:'',
      searchList:[]
    })
  },

  //删除搜索历史记录
  deleteSearchHistory(){
    wx.showModal({
      content: '确认删除吗？',
      success:(res)=>{
        if(res.confirm){
          //清空data中的historyList
          this.setData({
            historyList: []
          })
        }
      }
    })
    //移除本地的历史记录缓存
     wx.removeStorageSync('searchHistory')
  },

})

 JS要点：

  

这里将输入的搜索历史存放在storage中，以便获取到。