2024年uniapp实现搜索功能详细步骤【前端开发】(2)，阿里社招p8面试流程

JavaScript 和 ES6

在这个过程你会发现，有很多 JS 知识点你并不能更好的理解为什么这么设计，以及这样设计的好处是什么，这就逼着让你去学习这单个知识点的来龙去脉，去哪学？第一，书籍，我知道你不喜欢看，我最近通过刷大厂面试题整理了一份前端核心知识笔记，比较书籍更精简，一句废话都没有，这份笔记也让我通过跳槽从8k涨成20k。

如果你觉得对你有帮助，可以戳这里获取：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这种情况下，在回调之后，会将这个好友的用户信息渲染出来，但与普通的搜索结果不同的是，此时用户信息栏的“加好友”按钮会变成“已添加”状态(避免出现重复添加的奇怪情况)

else if(res.data.message == “1”){

this.currentFontIconClass = “icon-user-check”

this.currentNickClass = “nickname_searched”,

this.currentIconClass = “icon_searched”,

this.currentImgClass = “image_searched”,

this.currentclass = “friend”,

this.imgSrc = “https:xxxx” + this.searchName

}

这部分的代码，首先跟后端协商好，返回的 message 变量的值为1时，代表搜索的对象已经是发起搜索的用户的好友。因而一句简单的判断，即可选中这种情况。

之后仍然是动态类名，仍然不做详细介绍。

4.搜索的对象是正常的结果(除了以上三种情况的结果)

这种情况最为普通，回调后将搜索对象的用户信息渲染即可，用户信息栏会出现正常的“加好友”按钮。

else{

this.currentFontIconClass = “icon-user-plus1”

this.currentNickClass = “nickname_searched”,

this.currentIconClass = “icon_searched”,

this.currentImgClass = “image_searched”,

this.currentclass = “friend”,

this.imgSrc = “https:xxxx” + this.searchName

}

以上四种情况的渲染实现方法在下一个步骤：动态类名 中进行介绍。

---

4️⃣动态类名

首先简单介绍动态类名：动态类名是相对于静态类名而言的。在前端开发中，一个组件可以拥有class，也即类名。当类名以一个 “xx” 的格式被赋值时，它就是一个静态类名。(可以理解为字符串)

当使用 v-bind: variable 时，代表我们使用了一个动态的表达式来表示类名，这个 “variable” 的值就是我们这个组件的类名。其中 v-bind：可以简写为“：”。

接下来举几个在本例中用到的动态类名的场景：

1.关于用户信息组件：

没有搜索任务时，用户信息组件的类名为默认的不显示类名，但当有搜索结果时，类名要变化为相应的结果的类名：

.friend_unSearched{

text-align: center;

width: 100%;

height: 110rpx;

}

.friend{

margin-top: 45rpx;

position: relative;

background-color: #FFFFFF;

width: 100%;

height: 100rpx;

}

2.关于添加好友按钮、用户头像等小组件：

.icon_searched{

height: 100rpx;

width: 100rpx;

}

.icon_unsearched{

width: 0rpx;

height: 0rpx;

}

.image_unsearched{

width: 0rpx;

height: 0rpx;

}

.image_searched{

margin-top: 3rpx;

line-height: 94rpx;

margin-left: 35rpx;

width: 94rpx;

height: 100rpx;

border-radius: 50%;

}

.icon_searched,.nickname_searched{

float: left;

}

.nickname_searched{

margin-left: 55rpx;

line-height: 100rpx;

}

.nickname_unsearched{

line-height: 100rpx;

margin: 0 auto;

text-align: center;

}

.fonticon_unsearched{

height: 0rpx;

width: 0rpx;

}

.icon-user-plus1,.icon-user,.icon-user-check{

line-height: 110rpx;

position: absolute;

right: 35rpx;

font-size: 40rpx;

}

上面的部分是用到了动态类名的css代码片段，可以和最初文章的第一部分展示的html代码进行对比，得到更加深刻的理解。

---

5️⃣效果优化

最后做一个简单的小的搜索功能优化：

要实现的效果：搜索结果在搜索框最后一个文字被擦除的瞬间完全消失。

首先，在html部分给input组件添加一个@input事件，这个事件会在input输入框的内容发生改变时被触发，同时会把此时的输入框内容作为事件的参数返回。

而后在JavaScript部分实现这个@input事件：

inputChanged(e){

if(e.target.value == “”){

this.searchName = “”,

this.imgSrc = “”,

this.currentFontIconClass = “fonticon_unsearched”

this.currentclass = “friend_unSearched”,

this.currentIconClass = “icon_unsearched”,

this.currentImgClass = “image_unsearched”,

this.currentNickClass = “nickname_unsearched”

}

}

其中inputChange()是给@input事件起的名字，这个名字可以任意起。需要注意的一点是，这里的 消失 仍然是用到了 动态类名 的方法。

最后的最后补充一下，演示gif图上的用户信息栏最右侧的小人是用字体图标实现的，这部分可能单独做一个博客展示。

---

III.源码

---

添加好友

<input type=“text” placeholder=“请输入对方的昵称” v-model=“friendName” @input=“inputChanged”/>

<view class=“searchbtn” @click=“search”>

搜索

{{searchName}}

<span @click=“add” :class=“currentFontIconClass”>