快捷導(dǎo)航

vue.js滾動(dòng)條插件vue-scroll的基本用法

更新時(shí)間：2023年12月01日 09:51:05 作者：是小明同學(xué)～吖

在移動(dòng)端或PC,頁(yè)面的部分內(nèi)容常常需要我們讓其在頁(yè)面滾動(dòng),這篇文章主要給大家介紹了關(guān)于vue.js滾動(dòng)條插件vue-scroll的基本用法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

1）介紹

vuescroll 是一個(gè)基于 vue.js 2.X虛擬滾動(dòng)條，它支持定制滾動(dòng)條的樣式，檢測(cè)內(nèi)容尺寸變化、能夠使內(nèi)容分頁(yè)、支持上拉-刷新，下推加載等諸多特性

2）特點(diǎn)

(1)擁有原生滾動(dòng)條的滾動(dòng)行為

(2)可以定制滾動(dòng)條的樣式(包括顏色、尺寸、位置、透明度、是否保持顯示等)

(3)在模式之間自由切換

(4)能夠通過(guò)設(shè)置滾動(dòng)動(dòng)畫來(lái)平滑地滾動(dòng)

(5)拉取刷新和推動(dòng)加載

(6)支持分頁(yè)模式(每次滑動(dòng)整個(gè)頁(yè)面)

(7)支持快照模式(每次滑動(dòng)滾動(dòng)一個(gè)用戶定義的距離)

(8)可以檢測(cè)內(nèi)容尺寸發(fā)生變化

3）用法

(1)安裝

npm install vuescroll -S

(2)使用

①入口文件配置

import Vue from 'vue' 
import vuescroll from 'vuescroll' 
Vue.use(vuescroll) 
const vm = new Vue({ el: "#app", data: { ops: { vuescroll: { }, scrollPanel: { } // ... } } })

②或在需要的頁(yè)面引入

import vueScroll from "vuescroll";

在components中再注冊(cè)一下

 components:{vueScroll,}

這兩種引入方式都可以，引入后用vuescroll包裹需要滾動(dòng)的部分

<div id="app" >
  <vue-scroll :ops="ops">
    <div class="content" v-for= "item in 100" :key="item" >
      <span>{{item}}</span>
    </div>
  </vue-scroll>
 </div>

③配置

在data中寫明需要修改的配置項(xiàng)

data(){
  return{
      // 滾動(dòng)條的配置信息
      ops:{
      vueScroll:{},
      scrollPanel:{},
      rail:{
              opacity:'0.1',
              border:'1px solid #f2f2f2',
              size:'6px'
       },
       bar:{
                size:'6px',
                background:'#999',
                keepShow:true,
              }
        },}}

④配置項(xiàng)匯總

export default {
  // vuescroll  vuescroll: {
    mode: 'native',
    // 設(shè)置 vuescroll的大小類型， 可選的有percent, number. 
    // 設(shè)置為percent會(huì)把 vuescroll 的 height 和 width 設(shè)置成100%,
    // 設(shè)置成number的話 vuescroll 會(huì)自動(dòng)計(jì)算父元素的大小，并將height和width設(shè)置成對(duì)應(yīng)的數(shù)值。
    // 提示:如果父元素的尺寸為百分比大小時(shí)建議設(shè)置成number,如果父元素大小為一個(gè)固定的px的值,那么設(shè)置為百分比比較合適一些。
    sizeStrategy: 'percent',
    // 是否開啟監(jiān)聽 dom resize
    detectResize: true,
    // 下拉刷新相關(guān)(slide mode)    pullRefresh: {
      enable: false,
      // 下拉刷新的提示
      tips: {
        deactive: 'Pull to Refresh',
        active: 'Release to Refresh',
        start: 'Refreshing...',
        beforeDeactive: 'Refresh Successfully!'
      }
    },
    // 上推加載相關(guān)
    pushLoad: {
      enable: false,
      tips: {
        deactive: 'Push to Load',
        active: 'Release to Load',
        start: 'Loading...',
        beforeDeactive: 'Load Successfully!'
      },
      auto: false,
      autoLoadDistance: 0
    },
    paging: false,
    zooming: true,
    // 快照
    snapping: {
      enable: false,
      width: 100,
      height: 100
    },
    /* shipped scroll options */
    scroller: {
      /*
        允許滾動(dòng)出邊界
        true 或者 false 或者一個(gè)數(shù)組指定哪個(gè)方向可以超出邊界，可選項(xiàng)分別是：
        ['top','bottom','left','right']
      */
      bouncing: true,
      /** Enable locking to the main axis if user moves only slightly on one of them at start */
      locking: true,
      /** 最小縮放級(jí)別 */
      minZoom: 0.5,
      /** 最大縮放級(jí)別 */
      maxZoom: 3,
      /** 滾動(dòng)速度的倍速 **/
      speedMultiplier: 1,
      /** 到達(dá)邊界時(shí)應(yīng)用于減速的改變量  **/
      penetrationDeceleration: 0.03,
      /** 到達(dá)邊界時(shí)應(yīng)用于加速的改變量  **/
      penetrationAcceleration: 0.08,
      /** Whether call e.preventDefault event when sliding the content or not */
      preventDefault: true,
      /** Whether call preventDefault when (mouse/touch)move*/
      preventDefaultOnMove: true
    }
  },
  scrollPanel: {
    // 組件加載完后的初始滾動(dòng)量
    initialScrollY: false,
    initialScrollX: false,
    // 是否禁止x或y方向上的滾動(dòng)
    scrollingX: true,
    scrollingY: true,
    speed: 300,
    // 滾動(dòng)動(dòng)畫
    easing: undefined,
    // 是否有一個(gè)padding樣式，樣式的大小應(yīng)該和rail/bar的大小是一樣。可以用來(lái)阻止內(nèi)容被滾動(dòng)條遮住一部分
    padding: false，
    // 有時(shí)候原聲滾動(dòng)條可能在左側(cè),
    // 請(qǐng)查看 https://github.com/YvesCoding/vuescroll/issues/64
    verticalNativeBarPos: 'right'
  },
   //滾動(dòng)條滾動(dòng)的地方   rail: {
    background: '#01a99a',
    opacity: 0,
    border: 'none',
    /** Rail's size(Height/Width) , default -> 6px */
    size: '6px',
    /** Specify rail's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
    specifyBorderRadius: false,
    /** Rail the distance from the two ends of the X axis and Y axis. **/
    gutterOfEnds: null,
    /** Rail the distance from the side of container. **/
    gutterOfSide: '2px',
    /** Whether to keep rail show or not, default -> false, event content height is not enough */
    keepShow: false
  },
  bar: {
    /** 當(dāng)不做任何操作時(shí)滾動(dòng)條自動(dòng)消失的時(shí)間 */
    showDelay: 500,
    /** Specify bar's border-radius, or the border-radius of rail and bar will be equal to the rail's size. default -> false **/
    specifyBorderRadius: false,
    /** 是否只在滾動(dòng)的時(shí)候現(xiàn)實(shí)滾動(dòng)條 */
    onlyShowBarOnScroll: true,
    /** 是否保持顯示 */
    keepShow: false,
    /** 滾動(dòng)條顏色, default -> #00a650 */
    background: 'rgb(3, 185, 118)',
    /** 滾動(dòng)條透明度, default -> 1  */
    opacity: 1,
    /** Styles when you hover scrollbar, it will merge into the current style */
    hoverStyle: false
  },
  scrollButton: {
    enable: false,
    background: 'rgb(3, 185, 118)',
    opacity: 1,
    step: 180,
    mousedownStep: 30
  }
};