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

2020-06-16 06:41:57易采站长站整理

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)">