这篇文章主要介绍了Vue列表实现滚动到指定位置样式改变效果，本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
这个需求大概是这样子：
我做的一个聊天Demo，在搜索框搜索用户，可以滚动到指定的用户。然后成选中状态。
这是目前状态，我搜索南宫仆射 ，想要下面的用户列表直接滚动到南宫仆射并改变CSS样式。
查询之后是这个子：
嗯，我的思路：
在搜索框搜索到用户之后会返回一个用户对象，之后会调用列表的点击事件，改变CSS样式及做一些聊天的逻辑。然后需要获取到列表对应的id值，直接使用 document.getElementById(it).scrollIntoView();
具体实现：
列表：使用vue的v-for指令 ，这里的id值使用的是遍历的索引值，外层是一个自定义滚动条组件。样式也是使用vue指令，一个语法糖。
<li> <p class="name">{{item.name}}</p></li>
搜索框：这里使用带提示的输入框，
JS代码：请求为get请求的axios封装，hr为查询返回的对象，hrs为所有的列表对象。
SearchCurrentSession() { this.getRequest("/chat/?name=" + this.SearchHr).then(resp => { if (resp) { this.hr = resp; this.SearchHr = ''; this.changeCurrentSession(this.hr); let it = 0; this.hrs.forEach((item, index) => { if (item.name == this.hr.name) { it = index; } }) document.getElementById(it).scrollIntoView(); // document.getElementsByClassName("active")[0].scrollIntoView(); } });
changeCurrentSession(currentSession) { this.$store.commit('changeCurrentSession', currentSession) },
页面全部代码：
<div style="height: 100%;width: 100%"> <div class="leftlist"> <div> <div style="margin-top: 5px;font-size: 13px"> <div>用户名：{{user.name}}</div><div>手机号码：{{user.phone}}</div><div>电话号码：{{user.telephone}}</div><div>地 址：{{user.address}}</div><div>备注：{{user.remark}}</div></div></div> <i class="fa fa-weixin fa-2x"></i> <i class="fa fa-windows fa-2x"></i> <i class="fa fa-modx fa-2x"></i> <i class="fa fa-share-alt fa-2x"></i></div><div id="list"> <div style="height:100%;width:100%"> <ul style="padding-left: 0px"> <li> <p class="name">{{item.name}}</p></li></ul></div></div></div> .my-scroll-bars { height: 610px; } /* override gemini-scrollbar default styles */ /* vertical scrollbar track */ .gm-scrollbar.-vertical { background-color: #f0f0f0 } /* horizontal scrollbar track */ .gm-scrollbar.-horizontal { background-color: transparent; } /* scrollbar thumb */ .gm-scrollbar .thumb { background-color: rebeccapurple; } .gm-scroll-view { overflow-x: hidden; } .gm-scrollbar .thumb:hover { background-color: fuchsia; } input-with-select { margin-top: 50px; padding-top: 20px; } .el-scrollbar__wrap { width: 100%; height: 100%; overflow-x: hidden; } .el-menu-item is-active { padding-left: 10px; } .el-menu-vertical-demo { background-color: #2e3238; width: 80px; height: 100%; /*opacity:0.8;*/ } .leftlist { background-color: transparent; width: 90px; height: 700px; overflow-x: hidden; } .avatar { width: 45px; height: 45px; /*这个是图片和文字居中对齐*/ border-radius: 5px; margin-top: 5px; } .el-scrollbar__wrap { background-color: #E4E7ED; } #el-scrollbar { background-color: #E4E7ED; } #list { background-color: #E4E7ED; width: 100%; overflow-x: hidden; li { padding: 7px 15px; border-bottom: 1px solid #E4E7ED; cursor: pointer; list-style: none; color: #505458; &:hover { background-color: rgba(0, 0, 0, 0.07); } } li.active { /*注意这个是.不是冒号:*/ background-color: rgba(0, 0, 0, 0.1); } .avatar { border-radius: 2px; width: 30px; height: 30px; vertical-align: middle; } .name { display: inline-block; margin-left: 15px; margin-top: 0px; m<p style="color:transparent">本文来源gao!%daima.com搞$代*!码网1</p>argin-bottom: 0px; } }
总结
以上就是Vue列表如何实现滚动到指定位置样式改变效果的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue列表如何实现滚动到指定位置样式改变效果
转载请注明原文链接：Vue列表如何实现滚动到指定位置样式改变效果
