基于vue.js無縫滾動效果
更新時間：2018年01月25日 11:55:17 作者：chenxuan0000
這篇文章主要介紹了一個基于vue.js無縫滾動效果,文中給大家介紹的非常詳細(xì)，具有參考借鑒價值，需要的朋友可以參考下
一個簡單的基于vue.js的無縫滾動
:feet:在線文檔demo :ear_of_rice:小demo :blue_book:English Document
安裝
NPM
npm install vue-seamless-scroll --save
使用
ES6
詳情的demo頁面 example-src/App.vue
// **main.js**
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
<template>
<vue-seamless-scroll></vue-seamless-scroll>
</template>
// 或者你可以自己設(shè)置全局注冊的組件名 默認(rèn)注冊的組件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})
<template>
<scroll-seamless></scroll-seamless>
</template>普通的使用方法 (script標(biāo)簽引入)
Example:
詳情的demo頁面 test/test.html
<html>
<head>
...
</head>
<body>
<div id="app">
<vue-seamless-scroll></vue-seamless-scroll>
</div>
<script src="vue.js"></script>
<script src="vue-seamless-scroll"></script>
<script>
new Vue({
el: '#app'
})
</script>
</body>
</html>配置項默認(rèn)值
defaultOption () {
return {
step: 1, //數(shù)值越大速度滾動越快
limitMoveNum: 5, //開始無縫滾動的數(shù)據(jù)量 //this.dataList.length
hoverStop: true, //是否開啟鼠標(biāo)懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
openWatch: true, //開啟數(shù)據(jù)實時監(jiān)控刷新dom
singleHeight: 0, //單步運動停止的高度(默認(rèn)值0是無縫不停止的滾動) direction => 0/1
singleWidth: 0, //單步運動停止的寬度(默認(rèn)值0是無縫不停止的滾動) direction => 2/3
waitTime: 1000 //單步運動停止的時間(默認(rèn)值1000ms)
}
}總結(jié)
以上所述是小編給大家介紹的基于vue.js無縫滾動效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了Vue項目中配置pug解析支持的實例代碼，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05
這篇文章主要介紹了Vue 全家桶實現(xiàn)移動端酷狗音樂功能,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下2018-11-11
在管理系統(tǒng)中，常常需要在頂部tags顯示瀏覽歷史。本文將教大家如何通過Vue實現(xiàn)這一功能，文中的示例代碼講解詳細(xì)，需要的可以參考一下2021-12-12
詳解vue項目中如何引入全局sass/less變量、function、mixin
這篇文章主要介紹了詳解vue項目中如何引入全局sass/less變量、function、mixin，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
在Vue開發(fā)中使用:style綁定樣式是常見需求,應(yīng)注意:class與:style的配合使用,錯誤的使用可能導(dǎo)致樣式不生效,正確的方法是使用數(shù)組綁定多個樣式,這些技巧有助于提高開發(fā)效率和保持代碼整潔,感興趣的朋友跟隨小編一起看看吧2024-09-09
Vue判斷字符串(或數(shù)組)中是否包含某個元素的多種方法
在我們前端日常開發(fā)中經(jīng)常會遇到判斷一個字符串中是否包含某個元素的需求,下面這篇文章主要給大家介紹了關(guān)于Vue判斷字符串(或數(shù)組)中是否包含某個元素的多種方法,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-09-09
用vue-cli開發(fā)vue時的代理設(shè)置方法
今天小編就為大家分享一篇用vue-cli開發(fā)vue時的代理設(shè)置方法，具有很好的參考價值。希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
Vue環(huán)境下數(shù)據(jù)導(dǎo)出為PDF的最全指南
在現(xiàn)代Web應(yīng)用開發(fā)中,將數(shù)據(jù)導(dǎo)出為PDF是一項常見且重要的功能需求,本文將全面探討Vue環(huán)境下實現(xiàn)PDF導(dǎo)出的7種主要方法,大家可以根據(jù)自己的需求進(jìn)行選擇2025-05-05
Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播效果
這篇文章主要介紹了Ant?Design?Vue?走馬燈實現(xiàn)單頁多張圖片輪播,本文通過實例代碼給大家介紹的非常詳細(xì)，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-07-07
ref 加在子組件上，用this.$refs.（ref值） 獲取到的是組件實例，可以使用組件的所有方法，?在使用方法的時候直接this.$refs.（ref值）.方法（） 就可以使用了，這篇文章主要介紹了VUE中$refs的基本用法,需要的朋友可以參考下2022-12-12