基于vue.js無(wú)縫滾動(dòng)效果

更新時(shí)間：2018年01月25日 11:55:17 作者：chenxuan0000

這篇文章主要介紹了一個(gè)基于vue.js無(wú)縫滾動(dòng)效果,文中給大家介紹的非常詳細(xì)，具有參考借鑒價(jià)值，需要的朋友可以參考下

一個(gè)簡(jiǎn)單的基于vue.js的無(wú)縫滾動(dòng)

:feet:在線(xiàn)文檔demo :ear_of_rice:小demo :blue_book:English Document

安裝

NPM

npm install vue-seamless-scroll --save

使用

ES6

詳情的demo頁(yè)面 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è)置全局注冊(cè)的組件名 默認(rèn)注冊(cè)的組件名是 vue-seamless-scroll
Vue.use(scroll,{componentName: 'scroll-seamless'})
<template>
 <scroll-seamless></scroll-seamless>
</template>

普通的使用方法 (script標(biāo)簽引入)

Example:

詳情的demo頁(yè)面 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, //開(kāi)始無(wú)縫滾動(dòng)的數(shù)據(jù)量 //this.dataList.length
     hoverStop: true, //是否開(kāi)啟鼠標(biāo)懸停stop
     direction: 1, // 0向下 1向上 2向左 3向右
     openWatch: true, //開(kāi)啟數(shù)據(jù)實(shí)時(shí)監(jiān)控刷新dom
     singleHeight: 0, //單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無(wú)縫不停止的滾動(dòng)) direction => 0/1
     singleWidth: 0, //單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無(wú)縫不停止的滾動(dòng)) direction => 2/3
     waitTime: 1000 //單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)
    }
   }

總結(jié)

以上所述是小編給大家介紹的基于vue.js無(wú)縫滾動(dòng)效果，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章:

相關(guān)文章

Vue項(xiàng)目中配置pug解析支持
這篇文章主要介紹了Vue項(xiàng)目中配置pug解析支持的實(shí)例代碼，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2019-05-05
Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂(lè)功能
這篇文章主要介紹了Vue 全家桶實(shí)現(xiàn)移動(dòng)端酷狗音樂(lè)功能,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2018-11-11
Vue頂部tags瀏覽歷史的實(shí)現(xiàn)
在管理系統(tǒng)中，常常需要在頂部tags顯示瀏覽歷史。本文將教大家如何通過(guò)Vue實(shí)現(xiàn)這一功能，文中的示例代碼講解詳細(xì)，需要的可以參考一下
2021-12-12
詳解vue項(xiàng)目中如何引入全局sass/less變量、function、mixin
這篇文章主要介紹了詳解vue項(xiàng)目中如何引入全局sass/less變量、function、mixin，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-06-06
在vue中:style 的使用方式匯總
在Vue開(kāi)發(fā)中使用:style綁定樣式是常見(jiàn)需求,應(yīng)注意:class與:style的配合使用,錯(cuò)誤的使用可能導(dǎo)致樣式不生效,正確的方法是使用數(shù)組綁定多個(gè)樣式,這些技巧有助于提高開(kāi)發(fā)效率和保持代碼整潔,感興趣的朋友跟隨小編一起看看吧
2024-09-09
Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的多種方法
在我們前端日常開(kāi)發(fā)中經(jīng)常會(huì)遇到判斷一個(gè)字符串中是否包含某個(gè)元素的需求,下面這篇文章主要給大家介紹了關(guān)于Vue判斷字符串(或數(shù)組)中是否包含某個(gè)元素的多種方法,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下
2022-09-09
用vue-cli開(kāi)發(fā)vue時(shí)的代理設(shè)置方法
今天小編就為大家分享一篇用vue-cli開(kāi)發(fā)vue時(shí)的代理設(shè)置方法，具有很好的參考價(jià)值。希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2018-09-09
Vue環(huán)境下數(shù)據(jù)導(dǎo)出為PDF的最全指南
在現(xiàn)代Web應(yīng)用開(kāi)發(fā)中,將數(shù)據(jù)導(dǎo)出為PDF是一項(xiàng)常見(jiàn)且重要的功能需求,本文將全面探討Vue環(huán)境下實(shí)現(xiàn)PDF導(dǎo)出的7種主要方法,大家可以根據(jù)自己的需求進(jìn)行選擇
2025-05-05
Ant?Design?Vue?走馬燈實(shí)現(xiàn)單頁(yè)多張圖片輪播效果
這篇文章主要介紹了Ant?Design?Vue?走馬燈實(shí)現(xiàn)單頁(yè)多張圖片輪播,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2022-07-07
VUE中$refs的基本用法舉例
ref 加在子組件上，用this.$refs.（ref值）獲取到的是組件實(shí)例，可以使用組件的所有方法，?在使用方法的時(shí)候直接this.$refs.（ref值）.方法（）就可以使用了，這篇文章主要介紹了VUE中$refs的基本用法,需要的朋友可以參考下
2022-12-12