Vue列表如何实现滚动到指定位置样式改变效果


Posted in Javascript onMay 09, 2020

这个需求大概是这样子:

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

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

Vue列表如何实现滚动到指定位置样式改变效果

查询之后是这个子:

Vue列表如何实现滚动到指定位置样式改变效果

嗯,我的思路:

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

具体实现:

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

<GeminiScrollbar
       class="my-scroll-bars">
      <li v-for="(item,index) in hrs" :id="index"
       :key="index"
       :class="{ active: currentSession?item.username === currentSession.username:false}"
       @click="changeCurrentSession(item)">
       <img class="avatar"
         :src="item.userface">
       <el-badge :is-dot="isDot[user.username+'#'+item.username]">
        <p class="name">{{item.name}}</p>
       </el-badge>
      </li>
     </GeminiScrollbar>

搜索框:这里使用带提示的输入框,

<el-autocomplete
       v-model="SearchHr" class="input-with-select" popper-append-to-body="false"
       style="width: 90%;padding-left: 5%;padding-top: 10px;margin-bottom: 10px"
       size="small"
       :fetch-suggestions="querySearch"
       placeholder="请输入内容"
       @select="handleSelect"
     >
      <el-button slot="append" icon="el-icon-search"
         @click="SearchCurrentSession(SearchHr)"></el-button>
     </el-autocomplete>

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

页面全部代码:

<template>

 <div style="display: flex;justify-content:space-between;height: 100%;width: 100%">
  <div class="leftlist">

   <el-menu background-color="#2e3238" router
      class="el-menu-vertical-demo"
      active-text-color="#67C23A"
      text-color="#fff"
      :collapse="isCollapse">
    <el-menu-item index="/chat" style="padding-left: 10px;margin:10px 0px 20px 2px">
     <el-tooltip effect="light" placement="right-start" popper-class="el-scrollbar">
      <div slot="content">

       <div style="margin-top: 5px;font-size: 13px;lineHeight:1.5;">
        <div>用户名:{{user.name}}</div>
        <div>手机号码:{{user.phone}}</div>
        <div>电话号码:{{user.telephone}}</div>
        <div>地 址:{{user.address}}</div>
        <div>备注:{{user.remark}}</div>
       </div>
      </div>
      <img class="avatar"
        :src="user.userface"
        :alt="user.name"></el-tooltip>
    </el-menu-item>
    <el-menu-item index="/chat" style="padding-left: 15px">
     <i class="fa fa-weixin fa-2x"></i>

    </el-menu-item>
    <el-menu-item index="/chat" style="padding-left: 15px">
     <i class="fa fa-windows fa-2x"></i>

    </el-menu-item>
    <el-menu-item index="/chat" style="padding-left: 15px">
     <i class="fa fa-modx fa-2x"></i>

    </el-menu-item>
    <el-menu-item index="/chat" style="padding-left: 15px">
     <i class="fa fa-share-alt fa-2x"></i>

    </el-menu-item>
   </el-menu>

  </div>
  <div id="list">

   <div style="height:100%;width:100%;overflow-x: hidden">

    <ul style="padding-left: 0px; overflow-x: hidden;">
     <el-autocomplete
       v-model="SearchHr" class="input-with-select" popper-append-to-body="false"
       style="width: 90%;padding-left: 5%;padding-top: 10px;margin-bottom: 10px"
       size="small"
       :fetch-suggestions="querySearch"
       placeholder="请输入内容"
       @select="handleSelect"
     >
      <el-button slot="append" icon="el-icon-search"
         @click="SearchCurrentSession(SearchHr)"></el-button>
     </el-autocomplete>

     <GeminiScrollbar
       class="my-scroll-bars">
      <li v-for="(item,index) in hrs" :id="index"
       :key="index"
       :class="{ active: currentSession?item.username === currentSession.username:false}"
       @click="changeCurrentSession(item)">
       <img class="avatar"
         :src="item.userface">
       <el-badge :is-dot="isDot[user.username+'#'+item.username]">
        <p class="name">{{item.name}}</p>
       </el-badge>
      </li>
     </GeminiScrollbar>
    </ul>
   </div>

  </div>
 </div>
</template>

<script>
 import {mapState} from 'vuex'
 export default {
  name: 'list',
  data() {
   return {
    isCollapse: true,
    SearchHr: '',
    hr: "",
    restaurants: [],
    user: JSON.parse(window.sessionStorage.getItem("user"))
   }
  },
  computed: {
   ...mapState([
    'hrs',
    'isDot',
    'currentSession'
   ])
  },
  methods: {
   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();

     }
    });

   },
   querySearch(queryString, cb) {
    this.restaurants = this.loadAll();
    let restaurants = [];
    this.restaurants.forEach(value => {
     let {name, username} = value;
     let restaurant = {value: name, username: username}
     restaurants.push(restaurant);
    });
    var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
    // 调用 callback 返回建议列表的数据
    cb(results);
   },
   createFilter(queryString) {
    return (SearchHr) => {
     return (SearchHr.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
    };
   },
   loadAll() {
    return this.hrs;
   },
   changeCurrentSession(currentSession) {
    this.$store.commit('changeCurrentSession', currentSession)
   },
   handleSelect(item) {
    console.log(item);
   }
  },
  mounted() {
   this.$store.dispatch('initData');
  }
 }
</script>

<style lang="scss" scoped>


 .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;
   margin-bottom: 0px;
  }
 }
</style>

总结

到此这篇关于Vue列表实现滚动到指定位置样式改变的文章就介绍到这了,更多相关Vue列表实现滚动到指定位置样式改变内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
制作特殊字的脚本
Jun 26 Javascript
javascript 从if else 到 switch case 再到抽象
Jul 17 Javascript
javascript单引号和双引号的区别和处理
May 14 Javascript
JS实现文档加载完成后执行代码
Jul 09 Javascript
JavaScript正则表达式替换字符串中图片地址(img src)的方法
Jan 13 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
js实现二级菜单点击显示当前内容效果
Apr 28 Javascript
vue 解决addRoutes动态添加路由后刷新失效问题
Jul 02 Javascript
element-ui如何防止重复提交的方法步骤
Dec 09 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
JavaScript实现拖拽功能
Feb 11 Javascript
详解JavaScript执行模型
Nov 16 Javascript
Node.js API详解之 util模块用法实例分析
May 09 #Javascript
Vue实现PC端靠边悬浮球的代码
May 09 #Javascript
Auto.JS实现抖音刷宝等刷视频app,自动点赞,自动滑屏,自动切换视频功能
May 08 #Javascript
基于JavaScript实现表格隔行换色
May 08 #Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 #Javascript
基于JQuery实现页面定时弹出广告
May 08 #jQuery
使用vue cli4.x搭建vue项目的过程详解
May 08 #Javascript
You might like
多数据表共用一个页的新闻发布
2006/10/09 PHP
PHP中extract()函数的妙用分析
2012/07/11 PHP
CI(CodeIgniter)框架配置
2014/06/10 PHP
thinkphp3.2.2实现生成多张缩略图的方法
2014/12/19 PHP
php操作(删除,提取,增加)zip文件方法详解
2015/03/12 PHP
PHP防止图片盗用(盗链)的方法小结
2016/11/11 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
extjs 04_grid 单击事件新发现
2012/11/27 Javascript
js nextSibling属性和previousSibling属性概述及使用注意
2013/02/16 Javascript
jquery.post用法关于type设置问题补充
2014/01/03 Javascript
JS 操作Array数组的方法及属性实例解析
2014/01/08 Javascript
JavaScript window.location对象
2014/11/14 Javascript
使用DNode实现php和nodejs之间通信的简单实例
2015/07/06 NodeJs
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
前端程序员必须知道的高性能Javascript知识
2016/08/24 Javascript
CSS+jQuery实现简单的折叠菜单
2016/12/20 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
2017/07/11 Javascript
详解NodeJs开发微信公众号
2018/05/25 NodeJs
node和vue实现商城用户地址模块
2018/12/05 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
2019/02/21 Javascript
Node.js API详解之 tty功能与用法实例分析
2020/04/27 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
Python中正则表达式的详细教程
2015/04/30 Python
python 在指定范围内随机生成不重复的n个数实例
2019/01/28 Python
Python多线程实现支付模拟请求过程解析
2020/04/21 Python
python MD5加密的示例
2020/10/19 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
浅析HTML5的WebSocket与服务器推送事件
2016/02/19 HTML / CSS
英国人最爱的饰品网站:Accessorize
2016/08/22 全球购物
乐天旅游香港网站:日本饭店预订
2017/11/29 全球购物
当我正在为表建立索引的时候,SQL Server 会禁止对表的访问吗
2014/04/28 面试题
一年级语文教学反思
2014/02/13 职场文书
病假证明模板
2015/06/19 职场文书
python process模块的使用简介
2021/05/14 Python
Python 详解通过Scrapy框架实现爬取百度新冠疫情数据流程
2021/11/11 Python