2024年【微信小程序学习】搜索音乐页面代码实现(1)，2024年最新mysql高频面试题

最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

{{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:[], //搜索历史记录

},

/**

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

', //用户输入的表单项数据

searchList:[], //关键字模糊匹配的数据

historyList:[], //搜索历史记录

},

/**

最后

今天的文章可谓是积蓄了我这几年来的应聘和面试经历总结出来的经验，干货满满呀！如果你能够一直坚持看到这儿，那么首先我还是十分佩服你的毅力的。不过光是看完而不去付出行动，或者直接进入你的收藏夹里吃灰，那么我写这篇文章就没多大意义了。所以看完之后，还是多多行动起来吧！

可以非常负责地说，如果你能够坚持把我上面列举的内容都一个不拉地看完并且全部消化为自己的知识的话，那么你就至少已经达到了中级开发工程师以上的水平，进入大厂技术这块是基本没有什么问题的了。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】