介绍 & lt; GeminiScrollbar
类=癿y-scroll-bars"比;
& lt;李v=癶rs"(项目,指数);:id=? index"
:关键=癷ndex"
:类=皗活跃:currentSession& # 63;项目。用户名===currentSession.username:假}“;
@click=癱hangeCurrentSession(项目)“比;
& lt; img类=癮vatar"
:src=https://www.yisu.com/zixun/" item.userface ">
& lt; el-autocomplete
v模型=癝earchHr"类=癷nput-with-select"popper-append-to-body=癴alse"
大?皊mall"
:fetch-suggestions=皅uerySearch"
占位符=扒胧淙肽谌?
@select=癶andleSelect"
比;
& lt; el-button槽=癮ppend"图标=癳l-icon-search"
@click=癝earchCurrentSession (SearchHr)“祝辞& lt;/el-button>
& lt;/el-autocomplete> SearchCurrentSession () {
this.getRequest(“/聊天/,# 63;name=? this.SearchHr)。然后(resp=比;{
如果(职责){
这一点。hr=职责;
这一点。SearchHr=& # 39; & # 39;;
this.changeCurrentSession (this.hr);
让它=0;
this.hrs。forEach((项目、索引)=比;{
如果(item.name==this.hr.name) {
它=指数;
}
}）
. getelementbyid (it) .scrollIntoView ();//document.getElementsByClassName (“active") [0] .scrollIntoView ();
}
}); & lt; template>
& lt; div比;
& lt; div类=發eftlist"祝辞
& lt; background - color el-menu=? 2 e3238"路由器
类=癳l-menu-vertical-demo"
active-text-color=? 67 c23a"
文本颜色=? fff"
:崩溃=癷sCollapse"比;
& lt; el-menu-item指数=?chat"比;
& lt; el-tooltip效果=發ight"位置=皉ight-start"popper-class=癳l-scrollbar"比;
& lt; div槽=癱ontent"祝辞
& lt; div比;
& lt; div>用户名:{{user.name}} & lt;/div>
& lt; div>手机号码:{{user.phone}} & lt;/div>
& lt; div>电话号码:{{user.telephone}} & lt;/div>
& lt; div>地址:{{user.address}} & lt;/div>
& lt; div>备注:{{user.remark}} & lt;/div>
& lt;/div>
& lt;/div>
& lt; img类=癮vatar"
:src=https://www.yisu.com/zixun/皍ser.userface”
:alt=" user.name ">
<我类=" fa fa-weixin fa-2x ">
<我类=" fa fa-windows fa-2x ">
<我类=" fa fa-modx fa-2x ">
<我类=" fa fa-share-alt fa-2x ">
这篇文章主要讲解了Vue列表实现滚动到指定位置样式改变效果的方法,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
我做的一个聊天演示,在搜索框搜索用户,可以滚动到指定的用户。然后成选中状态。
这是目前状态,我搜索南宫仆射,想要下面的用户列表直接滚动到南宫仆射并改变CSS样式。
嗯,我的思路:
在搜索框搜索到用户之后会返回一个用户对象,之后会调用列表的点击事件,改变CSS样式及做一些聊天的逻辑。然后需要获取到列表对应的id值,直接使用<代码> . getelementbyid (it) .scrollIntoView();
具体实现:
列表:使用Vue的v代表指令,这里的id值使用的是遍历的索引值,外层是一个自定义滚动条组件。样式也是使用Vue指令,一个语法糖。
{{item.name}}
李搜索框:这里使用带提示的输入框,
JS代码:请求为得到请求的axios封装,人力资源为查询返回的对象,小时为所有的列表对象。
changeCurrentSession (currentSession) {
美元。store.commit (& # 39; changeCurrentSession& # 39;, currentSession)
}, 页面全部代码:
