平武建站

Vue列表实现滚动到指定位置样式改变效果的方法

这篇文章主要讲解了Vue列表实现滚动到指定位置样式改变效果的方法，内容清晰明了，对此有兴趣的小伙伴可以学习一下，相信大家阅读完之后会有帮助。

成都创新互联公司主营松原网站建设的网络公司,主营网站建设方案,重庆App定制开发,松原h5微信小程序开发搭建,松原网站营销推广欢迎松原等地区企业咨询

这个需求大概是这样子：

我做的一个聊天Demo，在搜索框搜索用户，可以滚动到指定的用户。然后成选中状态。

这是目前状态，我搜索南宫仆射 ，想要下面的用户列表直接滚动到南宫仆射并改变CSS样式。

Vue列表实现滚动到指定位置样式改变效果的方法

查询之后是这个子：

Vue列表实现滚动到指定位置样式改变效果的方法

嗯，我的思路：

在搜索框搜索到用户之后会返回一个用户对象，之后会调用列表的点击事件，改变CSS样式及做一些聊天的逻辑。然后需要获取到列表对应的id值，直接使用 document.getElementById(it).scrollIntoView();

具体实现：

列表：使用vue的v-for指令 ，这里的id值使用的是遍历的索引值，外层是一个自定义滚动条组件。样式也是使用vue指令，一个语法糖。


      
  • 
       
       
        
    {{item.name}}
    
           
      
    •

    搜索框：这里使用带提示的输入框，

    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)
   },

    页面全部代码：

    看完上述内容，是不是对Vue列表实现滚动到指定位置样式改变效果的方法有进一步的了解，如果还想学习更多内容，欢迎关注创新互联行业资讯频道。


    新闻标题：Vue列表实现滚动到指定位置样式改变效果的方法
    URL标题：http://pwwzsj.com/article/ggsoed.html

    其他资讯