VUE中使用滾動(dòng)組件-vueSeamlessScroll
更新時(shí)間：2023年10月02日 09:34:16 投稿：wdc
這篇文章主要介紹了VUE中使用滾動(dòng)組件-vueSeamlessScroll,需要的朋友可以參考下
滾動(dòng)實(shí)例
1.安裝
npm install --save vue-seamless-scroll
2.引入組件vueSeamlessScroll
import vueSeamlessScroll from 'vue-seamless-scroll'
3.注冊組件
components: {
vueSeamlessScroll
}4.使用組件，外層需要包一個(gè)盒子content，content樣式設(shè)置(overflow: hidden; max-height: 具體數(shù)值)
<div class="content">
<vue-seamless-scroll
// 方法一：data數(shù)據(jù)傳遞；或者使用方法二：computed數(shù)據(jù)傳遞
:class-option="classOption"
:data="info"
>
<!--包ul和li-->
</vue-seamless-scroll>
</div>5.數(shù)據(jù)配置
5.1data中配置
// classOption配置動(dòng)態(tài)傳遞給class-option
classOption: {
// 滾動(dòng)速度
step: 0.4,
// 鼠標(biāo)懸停停止?jié)L動(dòng)
hoverStop: true,
// 滾動(dòng)組數(shù)
limitMoveNum: 2,
// 監(jiān)聽刷新
openWatch: true
},
// 網(wǎng)絡(luò)請求過來的數(shù)據(jù)動(dòng)態(tài)傳遞給data
info: []5.2computed中配置
computed: {
classOption () {
return {
// 滾動(dòng)速度
step: 0.4,
// 鼠標(biāo)懸停停止?jié)L動(dòng)
hoverStop: true,
// 滾動(dòng)組數(shù)
limitMoveNum: 2,
// 監(jiān)聽刷新
openWatch: true
}
}
}6.必須使用ul和li標(biāo)簽
<ul class="item-box">
<li
class="item"
v-for="item in info"
:key="item.time"
>
相關(guān)內(nèi)容
</li>
</ul>7.整體實(shí)例框架
<!-- 內(nèi)容開始 -->
<div class="content">
<vue-seamless-scroll
:class-option="classOption"
:data="info"
>
<ul class="item-box">
<li
class="item"
v-for="item in info"
:key="item.time"
>
相關(guān)內(nèi)容
</li>
</ul>
</vue-seamless-scroll>
</div>
<!-- 內(nèi)容結(jié)束 -->到此這篇關(guān)于VUE中使用滾動(dòng)組件-vueSeamlessScroll的文章就介紹到這了,更多相關(guān)VUE中使用滾動(dòng)組件-vueSeamlessScroll內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于如何一步步基于element-ui封裝查詢組件的相關(guān)資料,本文通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用vue.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2021-10-10
本文通過實(shí)例給大家介紹了Vue中使用webpack別名的方法,非常不錯(cuò)，具體一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-06-06
在Vue項(xiàng)目中用fullcalendar制作日程表的示例代碼
這篇文章主要介紹了在Vue項(xiàng)目中用fullcalendar制作日程表，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-08-08
詳解基于iview-ui的導(dǎo)航欄路徑（面包屑）配置
這篇文章主要介紹了詳解基于iview-ui的導(dǎo)航欄路徑（面包屑）配置,小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-02-02
vue 自定義提示框(Toast)組件的實(shí)現(xiàn)代碼
這篇文章主要介紹了vue 自定義提示框(Toast)組件的實(shí)現(xiàn)代碼，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-08-08
Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果并用Animate.css做轉(zhuǎn)場動(dòng)畫效果的代碼
這篇文章主要介紹了Vue實(shí)現(xiàn)Tab標(biāo)簽路由效果，并用Animate.css做轉(zhuǎn)場動(dòng)畫效果，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-07-07
vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost解決
在前端發(fā)出Ajax請求的時(shí)候,有時(shí)候會(huì)產(chǎn)生跨域問題,下面這篇文章主要給大家介紹了關(guān)于vue跨域問題:Access?to?XMLHttpRequest?at‘httplocalhost的解決辦法,需要的朋友可以參考下2023-01-01
vue中html2canvas給指定區(qū)域添加滿屏水印
本文主要介紹了vue中html2canvas給指定區(qū)域添加滿屏水印,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-11-11
這篇文章給大家詳細(xì)介紹了Vue強(qiáng)制組件重新渲染的正確方法,非常的實(shí)用,有需要的小伙伴可以參考下2020-02-02
這篇文章主要介紹了Vue中在setup下如何使用自定義指令，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-07-07