基于vue的無縫滾動組件

jerryloveemily 發布于2019-08-22 11:20 / 2708人閱讀

摘要：在上一直沒有發現的無縫滾動組件，在工作之余寫了個組件，分享出來希望大家一起學習進步。

vue-seamless-scroll

A simple, Seamless scrolling for Vue.js

在awesome上一直沒有發現vue的無縫滾動組件，在工作之余寫了個組件，分享出來希望大家一起學習進步。

Demo

https://github.com/chenxuan0000/vue-seamless-scroll/index.html

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

...

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吧。

云服務器 GPU云服務器無縫滾動水平無縫滾動文字無縫滾動 javascript無縫滾動

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/92202.html

vue無縫滾動的插件開發填坑分享

摘要：寫插件的初衷項目經常需要無縫滾動效果，當時寫的時候用用這個老插件，相對不上很好用。后來轉向在沒有找到好的無縫滾動插件，除了配置可以實現但是相對來說太重了，于是自己造了個輪子。寫插件的初衷 1.項目經常需要無縫滾動效果，當時寫jq的時候用用msClass這個老插件，相對不上很好用。2.后來轉向vue在vue-awesome沒有找到好的無縫滾動插件，除了配置swiper可以實現但是相對來...

岳光 2019-08-22 14:04 評論0 收藏0
[vue組件]無縫輪播圖

摘要：實現原理無縫滾動預處理為了無縫滾動，在傳進來的數組首部增加末尾元素，在尾部追加首元素看圖數據綁定視圖為當前顯示的輪播圖索引，然后只需要對進行操作，監聽的變化，一旦到達了邊界就重置，顯示出對應的圖片。該文章請對應源碼閱讀，github源碼地址，DEMO使用地址，線上DEOM展示。做一個vue基礎組件系列，使用vue以最簡潔的方式實現常用組件，可用于快速二次定制化開發。 (??????...

GHOST_349178 2019-08-30 13:47 評論0 收藏0
[vue組件]無縫輪播圖

摘要：實現原理無縫滾動預處理為了無縫滾動，在傳進來的數組首部增加末尾元素，在尾部追加首元素看圖數據綁定視圖為當前顯示的輪播圖索引，然后只需要對進行操作，監聽的變化，一旦到達了邊界就重置，顯示出對應的圖片。該文章請對應源碼閱讀，github源碼地址，DEMO使用地址，線上DEOM展示。做一個vue基礎組件系列，使用vue以最簡潔的方式實現常用組件，可用于快速二次定制化開發。 (??????...

Clect 2019-08-21 17:04 評論0 收藏0
vue-concise-slider vue滑動組件

摘要：中文一個簡單的滑動組件配置簡單支持自適應全屏按鈕分頁同時兼容移動端和端版本支持特點簡單配置輕量多種滑動樣式目前已實現全屏自適應移動端兼容垂直滾動定時自動切換不定寬度滾動無縫循環滾動多級滾動未來將實現漸變滾動視差效果鏈接文檔安裝中文 | English vue-concise-slider vue-concise-slider,一個簡單的滑動組件,配置簡單,支持自適應/全屏+按鈕+分頁...

Hwg 2019-08-21 14:18 評論0 收藏0
vue-concise-slider vue滑動組件

摘要：中文一個簡單的滑動組件配置簡單支持自適應全屏按鈕分頁同時兼容移動端和端版本支持特點簡單配置輕量多種滑動樣式目前已實現全屏自適應移動端兼容垂直滾動定時自動切換不定寬度滾動無縫循環滾動多級滾動未來將實現漸變滾動視差效果鏈接文檔安裝中文 | English vue-concise-slider vue-concise-slider,一個簡單的滑動組件,配置簡單,支持自適應/全屏+按鈕+分頁...

godlong_X 2019-08-01 15:37 評論0 收藏0