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

<view class="title">热搜榜</view>

<!-- 列表 -->

<view class="hotList">

  <view class="hotItem" wx:for="{{hotList}}" wx:key="searchWord">

     <text class="order">{{index + 1}}</text>

     <text>{{item.searchWord}}</text>

     <image class="iconImg"  wx:if="{{item.iconUrl}}" src="{{item.iconUrl}}"></image>

  </view>

</view>

**HTML要点：**



![](https://img-blog.csdnimg.cn/66725c4a6b844e70b232f3d892be5283.png)



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



![](https://img-blog.csdnimg.cn/7ec2ca9b90f0465282d4e6f28415d463.png)



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



![](https://img-blog.csdnimg.cn/453c85dcab7244e6b196a4b031c896df.png)



这里没用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要点：**



![](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;

最后

自我介绍一下，小编13年上海交大毕业，曾经在小公司待过，也去过华为、OPPO等大厂，18年进入阿里一直到现在。

深知大多数初中级Android工程师，想要提升技能，往往是自己摸索成长，自己不成体系的自学效果低效漫长且无助。

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！

因此收集整理了一份《2024年Web前端开发全套学习资料》，初衷也很简单，就是希望能够帮助到想自学提升又不知道该从何学起的朋友，同时减轻大家的负担。

[外链图片转存中…(img-K13kQ3jI-1715778712324)]

[外链图片转存中…(img-Xr4QusI4-1715778712325)]

[外链图片转存中…(img-AnG7iEiD-1715778712325)]

既有适合小白学习的零基础资料，也有适合3年以上经验的小伙伴深入学习提升的进阶课程，基本涵盖了95%以上Android开发知识点！不论你是刚入门Android开发的新手，还是希望在技术上不断提升的资深开发者，这些资料都将为你打开新的学习之门！

如果你觉得这些内容对你有帮助，需要这份全套学习资料的朋友可以戳我获取！！

由于文件比较大，这里只是将部分目录截图出来，每个节点里面都包含大厂面经、学习笔记、源码讲义、实战项目、讲解视频，并且会持续更新！