vue-seamless-scroll 實(shí)現(xiàn)簡單自動(dòng)無縫滾動(dòng)且添加對(duì)應(yīng)點(diǎn)擊事件的簡單整理
Vue 之 vue-seamless-scroll 實(shí)現(xiàn)簡單自動(dòng)無縫滾動(dòng),且添加對(duì)應(yīng)點(diǎn)擊事件的簡單整理
一、簡單介紹
Vue 開發(fā)的一些知識(shí)整理,方便后期遇到類似的問題,能夠及時(shí)查閱使用。
本節(jié)介紹,vue 中添加 vue-seamless-scroll,簡單實(shí)現(xiàn)自動(dòng)無縫滾動(dòng)的效果,并對(duì)應(yīng)添加點(diǎn)擊事件 ,如果有不足之處,歡迎指出,或者你有更好的方法,歡迎留言。
vue-seamless-scroll 是一個(gè)基于Vue.js的簡單無縫滾動(dòng)組件, 基于requestAnimationFrame實(shí)現(xiàn),配置多滿足多樣需求。目前支持上下左右無縫滾動(dòng),單步滾動(dòng),以及支持水平方向的手動(dòng)切換功能。
vue-seamless-scroll 配置項(xiàng):
key | description | default | val |
---|---|---|---|
step | 數(shù)值越大速度滾動(dòng)越快 | 1 | Number |
limitMoveNum | 開啟無縫滾動(dòng)的數(shù)據(jù)量 | 5 | Number |
hoverStop | 是否啟用鼠標(biāo)hover控制 | true | Boolean |
direction | 方向 0 往下 1 往上 2向左 3向右 | 1 | Number |
openTouch | 移動(dòng)端開啟touch滑動(dòng) | true | Boolean |
singleHeight | 單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 0/1 | 0 | Number |
singleWidth | 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3 | 0 | Number |
waitTime | 單步停止等待時(shí)間(默認(rèn)值1000ms) | 1000 | Number |
switchOffset | 左右切換按鈕距離左右邊界的邊距(px) | 30 | Number |
autoPlay | 1.1.17版本前手動(dòng)切換時(shí)候需要置為false | true | Boolean |
switchSingleStep | 手動(dòng)單步切換step值(px) | 134 | Number |
switchDelay | 單步切換的動(dòng)畫時(shí)間(ms) | 400 | Number |
switchDisabledClass | 不可以點(diǎn)擊狀態(tài)的switch按鈕父元素的類名 | disabled | String |
isSingleRemUnit | singleHeight and singleWidth是否開啟rem度量 | false | Boolean |
navigation | 左右方向的滾動(dòng)是否顯示控制器按鈕,true的時(shí)候autoPlay自動(dòng)變?yōu)閒alse | false | Boolean |
操作環(huán)境:
name | description | calback params |
---|---|---|
ScrollEnd | 一次滾動(dòng)完成的回調(diào)事件 | null |
操作環(huán)境
- win 10
- node v14.20.0
- npm 8.5.3
- @vue/cli 5.0.6
- vue 2.6.14
- vue-seamless-scroll 1.1.23
二、安裝和使用
1、npm
npm install vue-seamless-scroll --save
2、yarn
yarn add vue-seamless-scroll
3、cdn
https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js
4、使用
// 全局注冊 import Vue from 'vue' import scroll from 'vue-seamless-scroll' Vue.use(scroll) //或者 //Vue.use(scroll,{componentName: 'scroll-seamless'}) // 局部注冊 import vueSeamless from 'vue-seamless-scroll' export default { components: { vueSeamless } } // 使用 <div id="app"> <vue-seamless-scroll></vue-seamless-scroll> </div>
三、效果圖
自動(dòng)無縫滾動(dòng),且點(diǎn)擊對(duì)應(yīng)的每條都會(huì)顯示點(diǎn)中的索引,和顯示標(biāo)題,如圖
四、vue-seamless-scroll 點(diǎn)擊事件實(shí)現(xiàn)原理
1、在 vue-seamless-scroll 包一層 div ,然后添加對(duì)應(yīng)點(diǎn)擊事件獲取 $event
<div @click="handleButton($event)">
2、添加 tr 每組數(shù)據(jù) class 和 id 標(biāo)記
<tr v-for='(item, i) in listData' :key='i' class='labelIndex' :id='i'>
3、點(diǎn)擊事件處理 event ,得到點(diǎn)擊標(biāo)記的 class,最終獲得點(diǎn)擊 id
// 處理鼠標(biāo)點(diǎn)擊到哪條,可添加跳轉(zhuǎn) handleButton(e) { // let InfoAnync = JSON.parse(e.target.dataset.obj) // console.log(InfoAnync,' =====> InfoAnync') console.log(e, ' =====> e') console.log(e.path, ' =====> e.path') let length = e.path.length let labelIndex = -1 for(let i=0;i < length; i++){ if(e.path[i].className === 'labelIndex'){ labelIndex = i; break } } if(labelIndex !== -1){ console.log(e.path[labelIndex].innerText, ' =====> e.path[labelIndex].innerText') alert('labelIndex.id = ' + e.path[labelIndex].id + ',title: ' + this.listData[e.path[labelIndex].id].title) }else{ alert('未找到數(shù)據(jù),請(qǐng)檢查') } }
五、簡單實(shí)現(xiàn)
1、首先創(chuàng)建一個(gè) vue 文件,添加標(biāo)題和標(biāo)題欄
2、引入 vue-seamless-scroll ,使用并且傳遞數(shù)據(jù),然后 v-for 添加顯示數(shù)據(jù)
3、在 vue-seamless-scroll 中,添加點(diǎn)擊事件,首先外包一個(gè) div,添加一個(gè)點(diǎn)擊事件
4、接著,給 tr 添加 class 和 id ,到時(shí)點(diǎn)擊事件會(huì)根據(jù)此 class 和 id 進(jìn)行對(duì)應(yīng)的判斷
5、點(diǎn)擊事件處理,通過對(duì)應(yīng) e.path[i].className 獲取之前標(biāo)記的 class,然后在獲取到對(duì)應(yīng)綁定的 id 值,最后即可通過數(shù)據(jù)列表獲取到,對(duì)應(yīng)的信息,即可對(duì)應(yīng)進(jìn)行相關(guān)點(diǎn)擊事件的處理了
6、vue-seamless-scroll 簡單optionSetting設(shè)置如下
7、vue-seamless-scroll 簡單數(shù)據(jù)展示如下
8、運(yùn)行顯示,瀏覽器效果如圖
六、關(guān)鍵代碼
<template> <div class="wrap-container sn-container"> <div class="sn-content"> <div class="sn-title">消息自動(dòng)滾動(dòng)播放</div> <div class="sn-body"> <div class="wrap-container"> <div class="table"> <table border="0" cellpadding='0' cellspacing='0' class="table-header"> <tbody> <tr> <td width='60%'> <span>標(biāo) 題</span> </td> <td width='20%'> <span>日 期</span> </td> <td width='20%'> <span>熱 度</span> </td> </tr> </tbody> </table> <div @click="handleButton($event)"> <vue-seamless-scroll :data='listData' class="seamless-warp" :class-option="optionSetting"> <table border='0' cellpadding='0' cellspacing='0' class='item'> <tbody> <tr v-for='(item, i) in listData' :key='i' class='labelIndex' :id='i'> <td width='100%' class="title"> <span>{{item.title}}</span> </td> <td width='20%'> <span>{{item.date}}</span> </td> <td width='20%'> // 顯示熱度,且根據(jù)不同數(shù)值,顯示不同顏色 <span :class="{colorRed: item.hot > 2555,colorOrange: item.hot < 10}" >{{item.hot}}</span> </td> </tr> </tbody> </table> </vue-seamless-scroll> </div> </div> </div> </div> </div> </div> </template> <script> import vueSeamlessScroll from 'vue-seamless-scroll' export default { name: 'seamless-scroll', components: { vueSeamlessScroll }, data() { return { // 數(shù)據(jù) listData: [{ title: '錢花哪了?一圖帶你讀懂年輕人的消費(fèi)觀', date: '2020-05-05', hot: 2306 }, { title: '“五一”假期前三天國內(nèi)旅游收入超350億元', date: '2020-05-02', hot: 5689 }, { title: '滴滴、美團(tuán)、哈啰交戰(zhàn),本地生活會(huì)是終局?', date: '2020-05-02', hot: 9 }, { title: '“互聯(lián)網(wǎng)+文化”逆勢上行文娛消費(fèi)云端真精彩', date: '2020-04-25', hot: 288 }, { title: '樂觀還是悲觀?巴菲特是個(gè)現(xiàn)實(shí)主義者!', date: '2020-04-21', hot: 158 }, { title: 'B站的后浪,會(huì)把愛優(yōu)騰拍在沙灘上嗎?', date: '2020-04-20', hot: 889 }, { title: '華為如何做投資的:先給兩億訂單一年上市', date: '2020-04-01', hot: 5800 }, { title: '馬斯克:特斯拉股價(jià)太高了,我要賣豪宅', date: '2020-03-25', hot: 6 }, { title: '人民日?qǐng)?bào)海外版:云模式巧解“就業(yè)難”', date: '2020-03-16', hot: 88 }, { title: '剛剛港股"崩了":狂跌近1000點(diǎn)!', date: '2020-03-12', hot: 88 }, { title: '個(gè)人健康信息碼國家標(biāo)準(zhǔn)發(fā)布', date: '2020-02-28', hot: 5 }, { title: '傳軟銀國際裁員約10%兩名管理合伙人離職', date: '2020-02-15', hot: 258 }, { title: '27萬個(gè)崗位:區(qū)塊鏈、人工智能等專場招聘', date: '2020-02-10', hot: 198 }, { title: '一季度電商發(fā)展勢頭迅猛農(nóng)村電商破1300萬家', date: '2020-02-08', hot: 19 }] } }, computed:{ optionSetting(){ return{ step: 0.5, // 數(shù)值越大速度滾動(dòng)越快 limitMoveNum: 2, // 開始無縫滾動(dòng)的數(shù)據(jù)量 this.dataList.length hoverStop: true, // 是否開啟鼠標(biāo)懸停stop direction: 1, // 0向下 1向上 2向左 3向右 autoPlay: true, // 是否自動(dòng)滾動(dòng) openWatch: true, // 開啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom singleHeight: 0, // 單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 0/1 singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3 waitTime: 1000 // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms) } } }, methods:{ // 處理鼠標(biāo)點(diǎn)擊到哪條,可添加跳轉(zhuǎn) handleButton(e) { // let InfoAnync = JSON.parse(e.target.dataset.obj) // console.log(InfoAnync,' =====> InfoAnync') console.log(e, ' =====> e') console.log(e.path, ' =====> e.path') let length = e.path.length let labelIndex = -1 for(let i=0;i < length; i++){ if(e.path[i].className === 'labelIndex'){ labelIndex = i; break } } if(labelIndex !== -1){ console.log(e.path[labelIndex].innerText, ' =====> e.path[labelIndex].innerText') alert('labelIndex.id = ' + e.path[labelIndex].id + ',title: ' + this.listData[e.path[labelIndex].id].title) }else{ alert('未找到數(shù)據(jù),請(qǐng)檢查') } } } } </script> <style lang="scss" scoped> .sn-title{ text-align: center; } .sn-container{ position: absolute; left: 30%; width: 600px; height: 800px; %table-style{ width: 100%; height: 35px; table-layout: fixed; tr { td { padding: 10px 5px; text-align: center; background-color: transparent; white-space: nowrap; overflow: hidden; color: #e200ff; font-size: 14px; } } } .table{ .table-header{ @extend %table-style; } .seamless-warp{ height: 400px; overflow: hidden; visibility: visible; .colorRed { color: #FF4669; } .colorOrange { color: #FFC956; } .item{ height: auto; @extend %table-style; tr{ td{ &.title{ text-overflow: ellipsis; display: inline-block; } } } } } } } </style>
以上內(nèi)容到此結(jié)束,下面補(bǔ)充介紹vue-seamless-scroll 動(dòng)態(tài)開啟和關(guān)閉滾動(dòng)
<vue-seamless-scroll :data="threeList" class="warp" :class-option="defaultOption" ref="scroll3" >
- 綁定一個(gè)ref,
- 通過
this.$refs.scroll3._cancle()
方法停止?jié)L動(dòng) - 通過
this,$ref.scroll3._startMove()
方法再次啟動(dòng)
到此這篇關(guān)于vue-seamless-scroll 實(shí)現(xiàn)簡單自動(dòng)無縫滾動(dòng),且添加對(duì)應(yīng)點(diǎn)擊事件的簡單整理的文章就介紹到這了,更多相關(guān)vue-seamless-scroll 無縫滾動(dòng)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- Vue3封裝自動(dòng)滾動(dòng)列表指令(含網(wǎng)頁縮放滾動(dòng)問題)
- vue如何實(shí)現(xiàn)列表自動(dòng)滾動(dòng)、向上滾動(dòng)的效果(vue-seamless-scroll)
- vue實(shí)現(xiàn)tab標(biāo)簽(標(biāo)簽超出自動(dòng)滾動(dòng))
- vue實(shí)現(xiàn)動(dòng)態(tài)添加數(shù)據(jù)滾動(dòng)條自動(dòng)滾動(dòng)到底部的示例代碼
- vue中使用vue-router切換頁面時(shí)滾動(dòng)條自動(dòng)滾動(dòng)到頂部的方法
- vue實(shí)現(xiàn)聊天框自動(dòng)滾動(dòng)的示例代碼
相關(guān)文章
Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼
本篇文章主要介紹了Vue2.0利用vue-resource上傳文件到七牛的實(shí)例代碼,具有一定的參考價(jià)值,有興趣的可以了解一下2017-07-07Vue如何實(shí)現(xiàn)數(shù)據(jù)的上移和下移
這篇文章主要介紹了Vue如何實(shí)現(xiàn)數(shù)據(jù)的上移和下移問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件詳解
在vue中我們使用模板HTML語法來組建頁面的,使用render函數(shù)我們可以用js語言來構(gòu)建DOM,這篇文章主要介紹了vue中的render函數(shù)、h()函數(shù)、函數(shù)式組件,需要的朋友可以參考下2023-02-02laravel5.4+vue+element簡單搭建的示例代碼
本篇文章主要介紹了laravel5.4+vue+element簡單搭建的示例代碼,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08