这个需求大概是这样子：

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

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

查询之后是这个子：

嗯，我的思路：

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

具体实现：

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

class="my-scroll-bars">

:key="index"

:class="{ active: currentSession?item.username === currentSession.username:false}"

@click="changeCurrentSession(item)">

:src="item.userface">

{{item.name}}

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

@click="SearchCurrentSession(SearchHr)为查询方法。

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"

>

@click="SearchCurrentSession(SearchHr)">

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)

},

页面全部代码：

class="el-menu-vertical-demo"

active-text-color="#67C23A"

text-color="#fff"

:collapse="isCollapse">

用户名：{{user.name}}
手机号码：{{user.phone}}
电话号码：{{user.telephone}}
地 址：{{user.address}}
备注：{{user.remark}}

:src="user.userface"

:alt="user.name">

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"

>

@click="SearchCurrentSession(SearchHr)">

class="my-scroll-bars">

:key="index"

:class="{ active: currentSession?item.username === currentSession.username:false}"

@click="changeCurrentSession(item)">

:src="item.userface">

{{item.name}}

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');

}

}

.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;

}

}

Vue如何引入jquery实现平滑滚动到指定位置效果

在以往的做法里首选jquery的animate实现,但是Vue里并没有这个方法.如何在Vue项目中实现点击导航平滑滚动到指定位置,为了这效果我是快要崩溃了,上网查阅了很久发现并没有真正意义上解决这个问 ...

js滚动到指定位置

序言:在网络上百度,关键字:“js div滚动到指定位置”,结果基本上大同小异!各种大神都给我们总结出来了四种滚动到指定位置的办法,可惜再下愚钝,每个都不会用,所以写了一个超级简单的方法来使初学者一看 ...

自定义ScrollViewer的Touch事件--触摸上下移动ScrollViewer滚动到指定位置

double mPointY;//触摸点的Y坐标 double mOffsetY;//滚动条当前位置 bool mIsTouch = false;//是否触摸 //触摸事件 private void ...

通过scrollTop，使子元素滚动至指定位置

想实现这样的一个功能,点击子元素,让元素滚动至指定位置,怎么实现呢? 在代码实现之前,先了解下相关关键点. 1.scrollHeight 属性 通过 scrollHeight 属性可获得子元素的滚动高 ...

ios开发之--令UITableView滚动到指定位置

这个应用场景还是挺多的,代码如下: //获取到需要跳转位置的行数 NSIndexPath *scrollIndexPath = [NSIndexPath indexPathForRow: inSect ...

selenium webdriver——JS滚动到指定位置

1.DOM滚动方法 1.scrollIntoView(alignWithTop)  滚动浏览器窗口或容器元素,以便在当前视窗的可见范围看见当前元素.如果alignWithTop为true,或者省略它, ...

利用jquery制作滚动到指定位置触发动画

利用 ...

jquery滚动到指定位置

利用jquery实现页面可视区滚动到指定位置.直接上代码 //滚动到指定位置 function scrollTo(element,speed) { if(!speed){ speed = 300; } ...

js 获取滚动位置，滚动到指定位置，平滑滚动

1.获取当前滚动条位置信息 var top = dom.scrollTop; // 获取y轴上的滚动位置 var left = dom.scrollLeft; // 获取x轴上的滚动位置 2.滚动到指 ...

随机推荐

Hadoop编程1：天气数据AWK & MapReduce

本文介绍通过AWK和MapReduce两种方式统计出每年温度到最高气温直.awk速度虽然快,而且简短,但是数据量巨大到时候,就遇到力瓶颈,及时分布式执行awk脚本,也会出现机器死掉等问题,需要容错机制 ...

人工免疫算法-python实现

AIAIndividual.py import numpy as np import ObjFunction class AIAIndividual: ''' individual of artifi ...

virsh命令

查看虚拟机: [root@super67 ~]# virsh list Id    Name                           State --------------------- ...

POJ2796 单调队列

Feel Good Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 8041   Accepted: 2177 Case Ti ...

使用XmlPullParser对xml进行读取

XML文件是一种标记性语言;在开发中经常在接口交互时被用作报文传输或者把自定义的类序列化为XML的形式存储到数据库.正因为XML文件这么常用,使用JAVA对XML文件进行读写操作是每一个开发人员必须掌 ...

JDK的帧--java.util包装工具库

题词 JDK,Java Development Kit. 首先,我们必须认识到,,JDK但,但设置Java只有基础类库.它是Sun通过基础类库开发,这是唯一的.JDK书写总结的类库.从技术含量来说,还 ...

Oracle在表上建立自增字段的方法

本方法为使用SEQUENCE(序列)   例如有表temp_test结构为: create table TEMP_TEST ( id number, nm varchar(10), primary k ...

简述layui前端ui框架的使用

官方网址:https://www.layui.com/demo/upload.html

EBS WEBADI导入日记账 客户化账户组合规则校验

近期项目需求对EBS中WEBADI导入日记账时,在加载数据时需要对账户组合额外进行客户化的校验,需要能够做到将校验结果体现在WEBADI模板的数据上,并且对每条错误数据都单独报错. 项目上的方案是调整 ...

javascript之传输加密

为什么要使用javascript加密呢?服务端加密远远不够,客户端或者浏览器端也需要加密,以此保证传输信息过程的安全. 今天就我工作中说说这么几种加密算法及其对应的应用场景,如下所示: base64 ...

div滚动到指定位置 vue_Vue列表实现滚动到指定位置样式改变相关推荐

  1. concurrentbag 删除指定元素_Python 列表，for循环，元组的使用(修改、添加、删除、排序、切片)

    Python 列表(List) Python的基本数据类型有整数,浮点数,布尔,字符串,它们是最基本的数据.在实际编程中,我们要经常组织由很多基本数据组成的集合,这些集合的不同组织方式就是:数据结构, ...

  2. Appium使用swipe定位滚动列表和滚动屏幕元素

    app自动化测试时,会碰到下图这样的元素,点击商品类型,弹出的选择框是滚动列表 使用uiautomatorviewer截图:滚动框为一个整体,无法定位到商品类型中的每一个元素,所以使用id,name无 ...

  3. 帆软 列表自动滚动脚本

    帆软 列表自动滚动脚本 使用该脚本时,需将 'REPORT0' 替换为自己报表块的名字 展示效果如下图: setTimeout(function() {//隐藏报表块report0的滚动条(此报表块名 ...

  4. 利用js获取滚动条滚动距离，实现图片固定在屏幕的某个位置

    利用js获取滚动条滚动距离,实现图片固定在屏幕的某个位置 思路: 1.获取对象距离顶部和左侧的距离: 2.获取元素对象: 3.当滚动条滚动时获取滚动条滚动的距离: 4.滚动条滚动时执行函数:对象距离顶 ...

  5. CSS3实现列表无限滚动/轮播

    使用CSS3实现列表的无限滚动/轮播 效果预览 思路 将当前列表滚动至最后一项的末尾,然后瞬间切换回第一项 问题点 用什么方式实现无限轮播 这个问题就是列表滚动到最后时底部会留白(有多余空间)如何处理 ...

  6. vue中实现列表无缝滚动

    1.安装 npm install vue-seamless-scroll --save 2.在需要使用的组件中引入进行配置 import vueSeamlessScroll from "vu ...

  7. div内图片和文字水平垂直居中且在屏幕任意位置

    有这样一个需求: 要求将文字与icon作为一个盒子,盒子内文字与icon水平垂直居中,且盒子可以放在屏幕的任意位置:比如左侧或者右侧或者居中,且具有响应式的特点. 思路如下: 首先,用一个div包裹两 ...

  8. 使用js原生代码实现类似新闻列表的滚动 题目来自4399小游戏2020年前端笔试编程题

    新闻列表的滚动循环播放 html代码 CSS代码 Script代码 总结 题目要求: 要求实现以下页面,其中列表项是滚动循环播放的,而且每次只显示3个,当鼠标经过的时候停止播放,鼠标离开继续播放 co ...

  9. Redis 笔记（04）— list类型（作为消息队列使用、在列表头部添加元素、尾部删除元素、查看列表长度、遍历指定列表区间元素、获取指定区间列表元素、阻塞式获取列表元素）

    Redis 的列表是链表而不是数组.这意味着 list 的插入和删除操作非常快,时间复杂度为 O(1),但是索引定位很慢,时间复杂度为 O(n). 当列表弹出了最后一个元素之后,该数据结构自动被删除, ...

最新文章

  1. java===java基础学习（11）---继承
  2. PHP redis秒杀返回结果,php结合redis实现高并发下的抢购、秒杀功能
  3. django 的 一对多的关系
  4. php 头bom_关于php中bom头的简介
  5. Oracle中的in 和 not in
  6. Scratch-介绍“克隆”
  7. android intent和intent action大全
  8. EntityFramework的多种记录日志方式,记录错误并分析执行时间过长原因
  9. javascript原型_JavaScript的原型：古怪，但这是它的工作原理
  10. 树的遍历和图的遍历的异同
  11. 360浏览器收藏夹_换了一台电脑，浏览器收藏的网站不见了，咋办？
  12. Spring boot 之 dubbo 无xml 简单入门
  13. Java 性能测试的四项原则
  14. 微服务网关Gateway和搭建
  15. 物联网卡可以一次性买很多吗？从哪可以购买物联网卡
  16. 900行c语言贪吃蛇,挑战CMD版贪吃蛇，能超过我的分算你赢
  17. 07、自己写库—构建库函数雏形
  18. “我是技术总监，你干嘛总问我技术细节？”
  19. asp毕业设计——基于asp+sqlserver的人力资源管理系统设计与实现（毕业论文+程序源码）——人力资源管理系统
  20. 《天龙八部》地形研究

热门文章

  1. android glsurface 闪屏,浅谈SurfaceView与GLSurfaceView
  2. Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
  3. android fqrouter2,fqrouter2
  4. 开学后表情的变化－－兔斯基版
  5. 虚幻4皮肤材质_PBR:应用于虚幻引擎4贴图和材质创建的启示 - 纳金网
  6. rosdep init与rosdep update报错问题
  7. Qt常用基本数据类型
  8. 数据中心 3D 可视化，动环、资产、容量管理一屏搞定
  9. 给UIButton设置BackgroundColor:forState
  10. #解决方法实测：Edge访问网页显示网络未连接（此时WiFi已连接）