侯体宗的博客
  • 首页
  • Hyperf版
  • beego仿版
  • 人生(杂谈)
  • 技术
  • 关于我
  • 更多分类
    • 文件下载
    • 文字修仙
    • 中国象棋ai
    • 群聊
    • 九宫格抽奖
    • 拼图
    • 消消乐
    • 相册

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

前端  /  管理员 发布于 5年前   611

这个需求大概是这样子:

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

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

查询之后是这个子:

嗯,我的思路:

在搜索框搜索到用户之后会返回一个用户对象,之后会调用列表的点击事件,改变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="https://www.jb51.net//article/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="https://www.jb51.net//article/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="https://www.jb51.net//article/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列表实现滚动到指定位置样式改变内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


  • 上一条:
    关于Laravel5.4 Vuejs编译失败的问题处理
    下一条:
    Vue实现PC端靠边悬浮球的代码
  • 昵称:

    邮箱:

    0条评论 (评论内容有缓存机制,请悉知!)
    最新最热
    • 分类目录
    • 人生(杂谈)
    • 技术
    • linux
    • Java
    • php
    • 框架(架构)
    • 前端
    • ThinkPHP
    • 数据库
    • 微信(小程序)
    • Laravel
    • Redis
    • Docker
    • Go
    • swoole
    • Windows
    • Python
    • 苹果(mac/ios)
    • 相关文章
    • 使用 Alpine.js 排序插件对元素进行排序(0个评论)
    • 在js中使用jszip + file-saver实现批量下载OSS文件功能示例(0个评论)
    • 在vue中实现父页面按钮显示子组件中的el-dialog效果(0个评论)
    • 使用mock-server实现模拟接口对接流程步骤(0个评论)
    • vue项目打包程序实现把项目打包成一个exe可执行程序(0个评论)
    • 近期文章
    • 智能合约Solidity学习CryptoZombie第二课:让你的僵尸猎食(0个评论)
    • 智能合约Solidity学习CryptoZombie第一课:生成一只你的僵尸(0个评论)
    • 在go中实现一个常用的先进先出的缓存淘汰算法示例代码(0个评论)
    • 在go+gin中使用"github.com/skip2/go-qrcode"实现url转二维码功能(0个评论)
    • 在go语言中使用api.geonames.org接口实现根据国际邮政编码获取地址信息功能(1个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf分页文件功能(0个评论)
    • gmail发邮件报错:534 5.7.9 Application-specific password required...解决方案(0个评论)
    • 欧盟关于强迫劳动的规定的官方举报渠道及官方举报网站(0个评论)
    • 在go语言中使用github.com/signintech/gopdf实现生成pdf文件功能(0个评论)
    • Laravel从Accel获得5700万美元A轮融资(0个评论)
    • 近期评论
    • 122 在

      学历:一种延缓就业设计,生活需求下的权衡之选中评论 工作几年后,报名考研了,到现在还没认真学习备考,迷茫中。作为一名北漂互联网打工人..
    • 123 在

      Clash for Windows作者删库跑路了,github已404中评论 按理说只要你在国内,所有的流量进出都在监控范围内,不管你怎么隐藏也没用,想搞你分..
    • 原梓番博客 在

      在Laravel框架中使用模型Model分表最简单的方法中评论 好久好久都没看友情链接申请了,今天刚看,已经添加。..
    • 博主 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 @1111老铁这个不行了,可以看看近期评论的其他文章..
    • 1111 在

      佛跳墙vpn软件不会用?上不了网?佛跳墙vpn常见问题以及解决办法中评论 网站不能打开,博主百忙中能否发个APP下载链接,佛跳墙或极光..
    • 2016-10
    • 2016-11
    • 2017-06
    • 2017-07
    • 2017-08
    • 2017-09
    • 2017-10
    • 2017-11
    • 2018-03
    • 2018-04
    • 2018-05
    • 2018-06
    • 2018-09
    • 2018-11
    • 2018-12
    • 2019-02
    • 2020-03
    • 2020-04
    • 2020-05
    • 2020-06
    • 2021-04
    • 2021-05
    • 2021-07
    • 2021-08
    • 2021-09
    • 2021-10
    • 2021-11
    • 2022-08
    • 2022-09
    • 2022-10
    • 2022-11
    • 2022-12
    • 2023-01
    • 2023-02
    • 2023-03
    • 2023-04
    • 2023-05
    • 2023-06
    • 2023-07
    • 2023-09
    • 2023-10
    • 2023-11
    • 2023-12
    • 2024-01
    • 2024-02
    • 2024-03
    • 2024-04
    Top

    Copyright·© 2019 侯体宗版权所有· 粤ICP备20027696号 PHP交流群

    侯体宗的博客