简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首頁 > web前端 > js教程 > 主體

vue的無縫滾動組件詳解

小云云
發布： 2017-12-18 16:18:34
原創
2680 人瀏覽過
本文和大家分享vue的無縫滾動組件詳解，在awesome上一直沒有發現vue的無縫滾動組件，在工作之餘寫了個組件，分享出來希望大家一起學習進步。

Installation

NPM

npm install vue-seamless-scroll --save
登入後複製

Usage

ES6

以下es6用法需要webpack環境編譯.

具體參考example-src/App.vue
import Vue from 'vue'
import vueSeamlessScroll from 'vue-seamless-scroll'

new Vue({
  components: {
    vueSeamlessScroll
  }
})
登入後複製

普通模式(script tag)

Example:

#具體參考test/test.html
<html>
<head>
  ...
</head>
<body>
  <p id="app">
    <vue-seamless-scroll></vue-seamless-scroll>
  </p>
  <script src="vue.js"></script>
  <script src="vue-seamless-scroll"></script>
  <script>
    new Vue({
      el: '#app'
    })
  </script>
</body>
</html>
登入後複製

Configure

      defaultOption () {
        return {
          step: 1, //步长 越大滚动速度越快
          limitMoveNum: 5, //启动无缝滚动最小数据量 this.dataList.length
          hoverStop: true, //是否启用鼠标hover控制
          direction: 1, //1 往上 0 往下
          openWatch: true, //开启data实时监听
          singleHeight: 0, //单条数据高度有值hoverStop关闭
          waitTime: 1000 //单步停止等待时间
        }
      }
登入後複製

TKS

vue-seamless-scroll發現bug或有什麼不足望指點,感覺不錯點個star吧。

相關推薦：

jquery滾動元件(vticker.js)實作頁面動態資料的捲動效果_jquery

基於捲軸位置判斷的簡單實例_javascript技巧

css實作隱藏捲軸的程式碼案例

以上是vue的無縫滾動組件詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！

相關標籤：
捲動 組件 詳解
來源：php.cn
上一篇：JavaScript 中數組操作注意點基礎 下一篇：詳解React受控組件與非受控組件
本網站聲明
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
作者最新文章
最新問題
透過新增 Width 屬性將內容向左移動 我已經為主體提供了邊距。主要{左邊緣：200px;右邊距：200px；文本對齊：居中}由於我想以兩行而不是一行顯示文本，因此我在樣式中添加了width屬性。 .p{字體大小：12p...
來自於 2024-04-06 22:01:35
0
3
816
解決CSS中頁面底部神秘空白的方法 我正在嘗試使用Bootstrap和D3建立一個簡單的網頁，但我不知道如何消除底部的所有空白。我想擺脫它。我嘗試將body和html的min-height設定為100%，但沒有任何作...
來自於 2024-04-06 20:22:15
0
1
454
使用MySQL SQL查詢計算另一張表中欄位的總和 我有一個這樣的模式：具有屬性“user_id”和“username”的用戶表以及具有屬性“customer_id”（user_id的FK）和“finalPrice”的訂單表資料庫架...
來自於 2024-04-06 19:39:29
0
1
441
如何從 customer_name 欄位取得名字 selectsubstring(custmer_name,1,instr(custmer_name,''))asfirst_namefromsales.customers;這個解決...
來自於 2024-04-06 17:43:30
0
2
433
使用SCSS產生預設值和CSS變數 我正在實現網站樣式。出於遺留支援的原因，我需要支援IE11，至少一段時間。出於工作流程和我的理智原因，我想盡可能使用css變數。我已經研究過這個解決方案，它會產生一些有效的東西，但...
來自於 2024-04-06 17:46:54
0
1
355
相關專題
更多>
熱門推薦
熱門教學
更多>
相關教學
熱門推薦
最新課程
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網：公益線上PHP培訓，幫助PHP學習者快速成長！