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图上的用户信息栏最右侧的小人是用字体图标实现的,这部分可能单独做一个博客展示。
添加好友
<input type=“text” placeholder=“请输入对方的昵称” v-model=“friendName” @input=“inputChanged”/>
<view class=“searchbtn” @click=“search”>
搜索
<span @click=“add” :class=“currentFontIconClass”>