vue項(xiàng)目中有使用文字的無縫滾動(dòng)場(chǎng)景
1，安裝vue-seamless-scroll
npm install vue-seamless-scroll --save
2.? yarn
yarn add vue-seamless-scroll
3.瀏覽器CDN
https://cdn.jsdelivr.net/npm/vue-seamless-scroll@latest/dist/vue-seamless-scroll.min.js
使用
1.全局注冊(cè)
import Vue from 'vue'
import scroll from 'vue-seamless-scroll'
Vue.use(scroll)
//或者
//Vue.use(scroll,{componentName: 'scroll-seamless'})
2.局部注冊(cè)
import vueSeamless from 'vue-seamless-scroll'
? export default {
? ? ? components: {
? ? ? ? vueSeamless}}
3.簡單使用
<div id="app">
? ? <vue-seamless-scroll></vue-seamless-scroll>
</div>
3，參數(shù)配置
// 監(jiān)聽屬性 類似于data概念
? ? ? ? computed: {
? ? ? ? ? ? defaultOption () {
? ? ? ? ? ? ? ? return {
? ? ? ? ? ? ? ? ? ? step: 0.2, // 數(shù)值越大速度滾動(dòng)越快
? ? ? ? ? ? ? ? ? ? limitMoveNum: 2, // 開始無縫滾動(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是無縫不停止的滾動(dòng)) direction => 0/1
? ? ? ? ? ? ? ? ? ? singleWidth: 0, // 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3
? ? ? ? ? ? ? ? ? ? waitTime: 1000 // 單步運(yùn)動(dòng)停止的時(shí)間(默認(rèn)值1000ms)} } },
key? ? ? ? ? ? ? ? ? ? ? ? ? ?description? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?default? ? ? ? ? ? ? ? ? ? ? ? ? ? val
step? ? ? ? ? ? ? ? ? ? ? ?數(shù)值越大速度滾動(dòng)越快? ? ? ? ? ? ? ? ? ? ? ?1? ? ? ? ? ? ? ? ? ? ? ? ? ? Number
limitMoveNum? ? ? ?開啟無縫滾動(dòng)的數(shù)據(jù)量? ? ? ? ? ? ? ? ? ? ? 5? ? ? ? ? ? ? ? ? ? ? ? ? ?Number
hoverStop? ? ? ? ? ? ?是否啟用鼠標(biāo)hover控制? ? ? ? ? ? ? ? ? ?true? ? ? ? ? ? ? ? ? ? ? ? ? Boolean
direction? ? ? ? ? ? ? ? 方向 0 往下 1 往上 2向左 3向右? ? ? ? ?1? ? ? ? ? ? ? ? ? ? ? ? ? ?Number
openTouch? ? ? ? ? ? ? ?移動(dòng)端開啟touch滑動(dòng)? ? ? ? ? ? ? ? ? ? ?true? ? ? ? ? ? ? ? ? ? ? ? ? Boolean
singleHeight? ? ? ? ? ? ? 單步運(yùn)動(dòng)停止的高度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 0/1? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0? ? ? ? ? ? ? ? ? ? ? ? ? ?Number
singleWidth? ? ? ? ? ? 單步運(yùn)動(dòng)停止的寬度(默認(rèn)值0是無縫不停止的滾動(dòng)) direction => 2/3? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?0? ? ? ? ? ? ? ? ? ? ? ? Number
waitTime? ? ? ? ? ? ?單步停止等待時(shí)間(默認(rèn)值1000ms)? ? ? ? ?1000? ? ? ? ? ? ? ? ? Number
switchOffset? ? ? ? ? 左右切換按鈕距離左右邊界的邊距(px)? ? 30? ? ? ? ? ? ? ? ? Number
autoPlay1.1.17? ? ? ? 版本前手動(dòng)切換時(shí)候需要置為false? ? ? ? ? true? ? ? ? ? ? ? ? Boolean
switchSingleStep? ? ? ? 手動(dòng)單步切換step值(px)? ? ? ? ? ? ? ? ? ? ?134? ? ? ? ? ? ? ? ? ? Number
switchDelay? ? ? ? ? ? ? ? 單步切換的動(dòng)畫時(shí)間(ms)? ? ? ? ? ? ? ? ? ? ? 400? ? ? ? ? ? ? ? ? ?Number
switchDisabledClass 不可以點(diǎn)擊狀態(tài)的switch按鈕父元素的類名? ?disabled? ? ? ? String
isSingleRemUnit? ?singleHeight and singleWidth是否開啟rem度量? ? ?false? ? ?Boolean
navigation? ? 左右方向的滾動(dòng)是否顯示控制器按鈕，true的時(shí)候autoPlay自動(dòng)變?yōu)閒alse? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?false? ? ? ? ? ? ? Boolean
