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

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要点：**



![](https://img-blog.csdnimg.cn/6a63b23b0b6b4f878bf9698aae6a6589.png)



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要点：**



![](https://img-blog.csdnimg.cn/69491896df6340f1a850de840edea975.png)

#### 最后更多分享：**前端字节跳动真题解析**

- ![](https://img-blog.csdnimg.cn/img_convert/7f0381ebc9199e6d31f1b3005d8391f4.webp?x-oss-process=image/format,png)


y(){

    wx.showModal({

      content: '确认删除吗？',

      success:(res)=>{

        if(res.confirm){

          //清空data中的historyList

          this.setData({

            historyList: []

          })

        }

      }

    })

    //移除本地的历史记录缓存

     wx.removeStorageSync('searchHistory')

  },



})

JS要点：

最后更多分享：前端字节跳动真题解析

• [外链图片转存中…(img-2eILIxPG-1718728617209)]