基于vue的無縫滾動(dòng)組件

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

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

vue-seamless-scroll

A simple, Seamless scrolling for Vue.js

在awesome上一直沒有發(fā)現(xiàn)vue的無縫滾動(dòng)組件，在工作之余寫了個(gè)組件，分享出來希望大家一起學(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, //步長 越大滾動(dòng)速度越快
          limitMoveNum: 5, //啟動(dòng)無縫滾動(dòng)最小數(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),感覺不錯(cuò)點(diǎn)個(gè)star吧。

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

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

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/92202.html

相關(guān)文章

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

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

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

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

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

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

Clect 2019-08-21 17:04 評(píng)論0 收藏0
vue-concise-slider vue滑動(dòng)組件

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

Hwg 2019-08-21 14:18 評(píng)論0 收藏0
vue-concise-slider vue滑動(dòng)組件

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

godlong_X 2019-08-01 15:37 評(píng)論0 收藏0