基于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:在線文檔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, //開始無(wú)縫滾動(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是無(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中使用vuex,修改state的值示例
今天小編就為大家分享一篇在vue中使用vuex,修改state的值示例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
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
vue實(shí)現(xiàn)放大縮小拖拽功能
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)放大縮小拖拽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2021-05-05
Vue3實(shí)現(xiàn)檢測(cè)密碼強(qiáng)度值功能
本文將演示如何使用Vue?3實(shí)現(xiàn)一個(gè)簡(jiǎn)單的密碼強(qiáng)度檢測(cè)功能,通過(guò)實(shí)時(shí)反饋,幫助用戶創(chuàng)建更安全的密碼,從而提升整體系統(tǒng)的安全性,需要的朋友可以參考下
2024-06-06
詳解VUE中的插值( Interpolation)語(yǔ)法
這篇文章主要介紹了詳解VUE中的插值( Interpolation)語(yǔ)法,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-10-10
vue?filters和directives訪問(wèn)this的問(wèn)題詳解
這篇文章主要介紹了vue?filters和directives訪問(wèn)this的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(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)步驟，文中通過(guò)示例代碼介紹的非常詳細(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 異步圖片放大失效的問(wèn)題
這篇文章主要介紹了解決vue-photo-preview 異步圖片放大失效的問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07