基于vue的無縫滾動組件

jerryloveemily 發(fā)布于2019-08-22 11:20 / 2723人閱讀

摘要：在上一直沒有發(fā)現(xiàn)的無縫滾動組件，在工作之余寫了個組件，分享出來希望大家一起學(xué)習(xí)進(jìn)步。

vue-seamless-scroll

A simple, Seamless scrolling for Vue.js

在awesome上一直沒有發(fā)現(xiàn)vue的無縫滾動組件，在工作之余寫了個組件，分享出來希望大家一起學(xué)習(xí)進(jìn)步。

Demo

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

Installation NPM

npm install vue-seamless-scroll --save

Usage ES6

以下es6用法需要webpack環(huán)境編譯.

具體參考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, //啟動無縫滾動最小數(shù)據(jù)量 this.dataList.length
          hoverStop: true, //是否啟用鼠標(biāo)hover控制
          direction: 1, //1 往上 0 往下
          openWatch: true, //開啟data實(shí)時(shí)監(jiān)聽
          singleHeight: 0, //單條數(shù)據(jù)高度有值hoverStop關(guān)閉
          waitTime: 1000 //單步停止等待時(shí)間
        }
      }

TKS

vue-seamless-scroll發(fā)現(xiàn)bug或者有什么不足望指點(diǎn),感覺不錯點(diǎn)個star吧。

GPU云服務(wù)器云服務(wù)器無縫滾動水平無縫滾動文字無縫滾動 javascript無縫滾動

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/92202.html

相關(guān)文章

vue無縫滾動的插件開發(fā)填坑分享

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

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

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

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

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

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

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

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

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

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