vue實現(xiàn)列表無縫動態(tài)滾動
要想實現(xiàn)列表的動態(tài)無縫滾動，這里推薦兩款組件，vue-seamless-scroll和vue3-seamless-scroll，組件的用法也非常簡單，以下是使用方式。
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%">檢查時間</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>
組件使用方法很簡單，引入組件后，直接給組件傳入列表數(shù)組和組件配置項即可，外層容器需要設(shè)置width、height、overflow:hidden，組件的配置項可以寫在computed里緩存起來。
computed: {
classOption () {//大屏滾動配置參數(shù)
return {
step: 1, // 數(shù)值越大速度滾動越快
limitMoveNum: 6, // 開始無縫滾動的數(shù)據(jù)量
hoverStop: true, // 是否開啟鼠標(biāo)懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
waitTime: 3000, // 單步運動停止的時間(默認(rèn)值1000ms)
singleHeight:30
}
},
},
實現(xiàn)效果如下
四、注意
在滾動列表中添加點擊事件，出現(xiàn)點擊事件失效的問題，可以看到在最后一項添加了詳情按鈕，點擊按鈕有一部分無法跳出彈窗。
原因是在于滾動組件為了實現(xiàn)無縫滾動，內(nèi)部復(fù)制了一份dom，復(fù)制的那份dom無法觸發(fā)點擊事件。
解決方案：
利用事件委托，在詳情按鈕那里綁定自定義屬性，然后給父級元素綁定點擊事件，通過e.target.dataset獲取自定義屬性，拿到對應(yīng)的數(shù)據(jù)。
//利用事件委托，解決滾動導(dǎo)致的點擊事件失效問題
clickup(e){
if(e.target.dataset.item){
let row = JSON.parse(e.target.dataset.item)
console.log(row)
}
},
vue3里實現(xiàn)列表滾動可以使用vue3-seamless-scroll，用法與vue2版本有一點不同，將配置項拆開傳入組件了
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>時間</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實現(xiàn)效果
到此這篇關(guān)于vue實現(xiàn)列表無縫動態(tài)滾動的文章就介紹到這了,更多相關(guān)vue列表無縫動態(tài)滾動內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了Vue v-text指令簡單使用方法,結(jié)合實例形式分析了v-text指令文本輸出顯示簡單操作技巧,需要的朋友可以參考下2019-09-09
SpringBoot+Vue開發(fā)之Login校驗規(guī)則、實現(xiàn)登錄和重置事件
這篇文章主要介紹了SpringBoot+Vue開發(fā)之Login校驗規(guī)則、實現(xiàn)登錄和重置事件,本文通過圖文實例相結(jié)合給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2020-10-10
Vue使用Composition?API生成計算屬性computed
這篇文章主要為大家詳細(xì)介紹了Vue如何使用Composition?API實現(xiàn)生成計算屬性computed，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-06-06
VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決
這篇文章主要介紹了VUE 項目在IE11白屏報錯 SCRIPT1002: 語法錯誤的解決，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
本文深入分析了副作用的實現(xiàn)以及執(zhí)行時機，并詳細(xì)分析了用于存儲副作用函數(shù)的targetMap的數(shù)據(jù)結(jié)構(gòu)及其實現(xiàn)原理，還深入分析了依賴收集track函數(shù)以及派發(fā)更新 trigger 函數(shù)的實現(xiàn),需要的朋友可以參考下2022-08-08
在 Vue 3中,枚舉值驗證（Enum-like validation）是提升組件健壯性的重要手段,本文將和大家詳細(xì)介紹一下具體的實現(xiàn)方法,感興趣的小伙伴可以了解下2026-04-04
這篇文章主要介紹了vue緩存組件keepalive的相關(guān)資料,keep-alive組件是使用 include exclude這兩個屬性傳入組件名稱來確認(rèn)哪些可以被緩存的，本文給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友參考下吧2022-08-08
這篇文章主要為大家詳細(xì)介紹了vue+iview實現(xiàn)手機號分段輸入框，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
Vue3+PDF.js實現(xiàn)高清PDF預(yù)覽組件開發(fā)(移動端)
本文基于Vue3和PDF.js封裝了一套移動端PDF預(yù)覽組件,其核心功能包括高清渲染,雙指手勢縮放,按鈕縮放等內(nèi)容,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以了解下2026-05-05
代碼優(yōu)化不僅僅局限在業(yè)務(wù)邏輯這塊，像是代碼復(fù)用、效率等等都是我們可以加以改進(jìn)的地方，這篇文章主要給大家介紹了關(guān)于Vue項目優(yōu)化的一些實戰(zhàn)策略，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05