基于vue.js無縫滾動(dòng)效果
更新時(shí)間：2018年01月25日 11:55:17 作者：chenxuan0000
這篇文章主要介紹了一個(gè)基于vue.js無縫滾動(dòng)效果,文中給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下
一個(gè)簡單的基于vue.js的無縫滾動(dòng)
: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>配置項(xiàng)默認(rèn)值
defaultOption () {
return {
step: 1, //數(shù)值越大速度滾動(dòng)越快
limitMoveNum: 5, //開始無縫滾動(dòng)的數(shù)據(jù)量 //this.dataList.length
hoverStop: true, //是否開啟鼠標(biāo)懸停stop
direction: 1, // 0向下 1向上 2向左 3向右
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)
}
}總結(jié)
以上所述是小編給大家介紹的基于vue.js無縫滾動(dòng)效果，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
您可能感興趣的文章:
相關(guān)文章
今天小編就為大家分享一篇在vue中使用vuex,修改state的值示例，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-11-11
解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類型聲明
這篇文章主要給大家介紹了關(guān)于如何解決vue3報(bào)錯(cuò):找不到模塊或其相應(yīng)的類型聲明的相關(guān)資料,這個(gè)錯(cuò)誤提示是指在代碼中引用了Vue模塊,但是系統(tǒng)找不到該模塊或者缺少相應(yīng)的類型聲明文件,需要的朋友可以參考下2023-07-07
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)放大縮小拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-05-05
Vue3實(shí)現(xiàn)檢測密碼強(qiáng)度值功能
本文將演示如何使用Vue?3實(shí)現(xiàn)一個(gè)簡單的密碼強(qiáng)度檢測功能,通過實(shí)時(shí)反饋,幫助用戶創(chuàng)建更安全的密碼,從而提升整體系統(tǒng)的安全性,需要的朋友可以參考下2024-06-06
這篇文章主要介紹了詳解VUE中的插值( Interpolation)語法,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-10-10
vue?filters和directives訪問this的問題詳解
這篇文章主要介紹了vue?filters和directives訪問this的問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
Vue組件Draggable實(shí)現(xiàn)拖拽功能
這篇文章主要為大家詳細(xì)介紹了Vue組件Draggable實(shí)現(xiàn)拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
vue-element-admin搭建后臺(tái)管理系統(tǒng)的實(shí)現(xiàn)步驟
本文主要介紹了vue-element-admin搭建后臺(tái)管理系統(tǒng)的實(shí)現(xiàn)步驟，文中通過示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
vue使用canvas實(shí)現(xiàn)移動(dòng)端手寫簽名
這篇文章主要為大家詳細(xì)介紹了基于vue使用canvas實(shí)現(xiàn)移動(dòng)端手寫簽名，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
解決vue-photo-preview 異步圖片放大失效的問題
這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07