Vue列表實(shí)現(xiàn)滾動(dòng)到指定位置樣式改變效果的方法

這篇文章主要講解了Vue列表實(shí)現(xiàn)滾動(dòng)到指定位置樣式改變效果的方法，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。

成都創(chuàng)新互聯(lián)公司主營(yíng)松原網(wǎng)站建設(shè)的網(wǎng)絡(luò)公司,主營(yíng)網(wǎng)站建設(shè)方案,重慶App定制開發(fā),松原h(huán)5微信小程序開發(fā)搭建,松原網(wǎng)站營(yíng)銷推廣歡迎松原等地區(qū)企業(yè)咨詢

這個(gè)需求大概是這樣子：

我做的一個(gè)聊天Demo，在搜索框搜索用戶，可以滾動(dòng)到指定的用戶。然后成選中狀態(tài)。

這是目前狀態(tài)，我搜索南宮仆射 ，想要下面的用戶列表直接滾動(dòng)到南宮仆射并改變CSS樣式。

查詢之后是這個(gè)子：

嗯，我的思路：

在搜索框搜索到用戶之后會(huì)返回一個(gè)用戶對(duì)象，之后會(huì)調(diào)用列表的點(diǎn)擊事件，改變CSS樣式及做一些聊天的邏輯。然后需要獲取到列表對(duì)應(yīng)的id值，直接使用 document.getElementById(it).scrollIntoView();

具體實(shí)現(xiàn)：

列表：使用vue的v-for指令 ，這里的id值使用的是遍歷的索引值，外層是一個(gè)自定義滾動(dòng)條組件。樣式也是使用vue指令，一個(gè)語(yǔ)法糖。

      

       
       
        
{{item.name}}
       
      
     

搜索框：這里使用帶提示的輸入框，

JS代碼：請(qǐng)求為get請(qǐng)求的axios封裝，hr為查詢返回的對(duì)象，hrs為所有的列表對(duì)象。

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

頁(yè)面全部代碼：

看完上述內(nèi)容，是不是對(duì)Vue列表實(shí)現(xiàn)滾動(dòng)到指定位置樣式改變效果的方法有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。