vue實(shí)現(xiàn)列表無(wú)縫動(dòng)態(tài)滾動(dòng)
要想實(shí)現(xiàn)列表的動(dòng)態(tài)無(wú)縫滾動(dòng)，這里推薦兩款組件，vue-seamless-scroll和vue3-seamless-scroll，組件的用法也非常簡(jiǎn)單，以下是使用方式。
vue2
vue2版本使用vue-seamless-scroll
vue-seamless-scroll文檔https://chenxuan0000.github.io/vue-seamless-scroll/zh/guide/
一、安裝組件
npm install vue-seamless-scroll --save
二、引入組件
import VueSeamlessScroll from 'vue-seamless-scroll'
三、使用組件
<template>
<div class="box-content">
<div class="box-table-title">
<div style="width: 40%">所屬公司</div>
<div style="width: 20%">檢查結(jié)果</div>
<div style="width: 30%">檢查時(shí)間</div>
<div style="width: 10%">操作</div>
</div>
<div class="box-table">
<div class="box-table-body" style="width: 100%;height: 140px;overflow: hidden" @click="clickup($event)">
<vue-seamless-scroll :data="checkList" :classOption="classOption">
<div class="box-table-row" v-for="item in checkList" :key="item.id">
<div class="ellipsis" style="width: 40%">{{ item.enterpriseName }}</div>
<div :class="['ellipsis',item.inspectionResult==='1'?'':'isRed']" style="width: 20%">{{item.inspectionResult==='1'?'合格':'不合格'}}</div>
<div class="ellipsis" style="width: 30%">{{ item.inspectionTime }}</div>
<div class="ellipsis facility-button" style="width: 10%" :data-item="JSON.stringify(item)">詳情</div>
</div>
</vue-seamless-scroll>
</div>
</div>
</div>
</template>
組件使用方法很簡(jiǎn)單，引入組件后，直接給組件傳入列表數(shù)組和組件配置項(xiàng)即可，外層容器需要設(shè)置width、height、overflow:hidden，組件的配置項(xiàng)可以寫(xiě)在computed里緩存起來(lái)。
computed: {
classOption () {//大屏滾動(dòng)配置參數(shù)
return {
step: 1, // 數(shù)值越大速度滾動(dòng)越快
limitMoveNum: 6, // 開(kāi)始無(wú)縫滾動(dòng)的數(shù)據(jù)量
hoverStop: true, // 是否開(kāi)啟鼠標(biāo)懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
waitTime: 3000, // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)
singleHeight:30
}
},
},
實(shí)現(xiàn)效果如下
四、注意
在滾動(dòng)列表中添加點(diǎn)擊事件，出現(xiàn)點(diǎn)擊事件失效的問(wèn)題，可以看到在最后一項(xiàng)添加了詳情按鈕，點(diǎn)擊按鈕有一部分無(wú)法跳出彈窗。
原因是在于滾動(dòng)組件為了實(shí)現(xiàn)無(wú)縫滾動(dòng)，內(nèi)部復(fù)制了一份dom，復(fù)制的那份dom無(wú)法觸發(fā)點(diǎn)擊事件。
解決方案：
利用事件委托，在詳情按鈕那里綁定自定義屬性，然后給父級(jí)元素綁定點(diǎn)擊事件，通過(guò)e.target.dataset獲取自定義屬性，拿到對(duì)應(yīng)的數(shù)據(jù)。
//利用事件委托，解決滾動(dòng)導(dǎo)致的點(diǎn)擊事件失效問(wèn)題
clickup(e){
if(e.target.dataset.item){
let row = JSON.parse(e.target.dataset.item)
console.log(row)
}
},
vue3里實(shí)現(xiàn)列表滾動(dòng)可以使用vue3-seamless-scroll，用法與vue2版本有一點(diǎn)不同，將配置項(xiàng)拆開(kāi)傳入組件了
vue3
vue3版本使用vue3-seamless-scroll
vue3-seamless-scroll文檔：https://doc.wssio.com/opensource/vue3-seamless-scroll/
一、組件安裝
npm install vue3-seamless-scroll
二、引入組件
import {Vue3SeamlessScroll} from 'vue3-seamless-scroll'
三、使用組件
<div class="table">
<div class="table-header">
<div>時(shí)間</div>
<div>姓名</div>
<div>地址</div>
</div>
<div class="table-body">
<Vue3SeamlessScroll v-model="isScroll" :list="tableData" :step="0.5" :hover="true"
:limitScrollNum="3" :wheel="true">
<div v-for="(item, index) in tableData" :key="index" class="table-row">
<div>{{ item.date }}</div>
<div>{{ item.name }}</div>
<div>{{ item.address }}</div>
</div>
</Vue3SeamlessScroll>
</div>
</div>四、demo實(shí)現(xiàn)效果
到此這篇關(guān)于vue實(shí)現(xiàn)列表無(wú)縫動(dòng)態(tài)滾動(dòng)的文章就介紹到這了,更多相關(guān)vue列表無(wú)縫動(dòng)態(tài)滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了vue的生命周期，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-02-02
這篇文章主要介紹了Vue中watchEffect的追蹤邏輯,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2025-04-04
這篇文章主要介紹了安裝多版本Vue-CLI的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-03-03
vue 實(shí)現(xiàn)在同一界面實(shí)現(xiàn)組件的動(dòng)態(tài)添加和刪除功能
這篇文章主要介紹了vue 實(shí)現(xiàn)在同一界面實(shí)現(xiàn)組件的動(dòng)態(tài)添加和刪除,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-06-06
vue3中封裝axios請(qǐng)求最新實(shí)現(xiàn)步驟
這篇文章主要給大家介紹了關(guān)于vue3中封裝axios請(qǐng)求的最新實(shí)現(xiàn)步驟,在Vue 3中可以通過(guò)封裝axios來(lái)實(shí)現(xiàn)接口的統(tǒng)一管理和調(diào)用,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04
Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序
這篇文章主要為大家詳細(xì)介紹了Vue中使用elementui與Sortable.js實(shí)現(xiàn)列表拖動(dòng)排序，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04
vue2自定義組件通過(guò)rollup配置發(fā)布到npm的詳細(xì)步驟
這篇文章主要介紹了vue2自定義組件通過(guò)rollup配置發(fā)布到npm,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue2和vue3實(shí)現(xiàn)圖片懶加載方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-04-04
使用Elemen加上lang=“ts“后編譯報(bào)錯(cuò)
本文主要介紹了使用Elemen加上lang=“ts“后編譯報(bào)錯(cuò)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
vue3.0父?jìng)鹘o子的值不隨父組件改變而改變問(wèn)題及解決
這篇文章主要介紹了vue3.0父?jìng)鹘o子的值不隨父組件改變而改變問(wèn)題及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10