vueScroll使用心得

最新推荐文章于 2024-08-30 07:30:05 发布

Darksness

最新推荐文章于 2024-08-30 07:30:05 发布

阅读量6.7k

点赞数 3

分类专栏： vue 文章标签： vuescrool js

本文链接：https://blog.csdn.net/xhwy_zh/article/details/93213887

版权

vue 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

废话不多说，先上代码

import Vue from 'vue'
import vuescroll from 'vuescroll'

Vue.use(vuescroll)
Vue.prototype.$vuescrollConfig = {
    vuescroll: {
        mode: 'native',//选择一个模式, native 或者 slide(pc&app)
        sizeStrategy: 'percent',//如果父容器不是固定高度，请设置为 number , 否则保持默认的percent即可
        detectResize: true//是否检测内容尺寸发生变化
    },
    scrollPanel: {
        initialScrollY: false,//只要组件mounted之后自动滚动的距离。 例如 100 or 10%
        initialScrollX: false,
        scrollingX: true,//是否启用 x 或者 y 方向上的滚动
        scrollingY: true,
        speed: 300,//多长时间内完成一次滚动。 数值越小滚动的速度越快
        easing: undefined,//滚动动画 参数通animation
        verticalNativeBarPos: 'right'//原生滚动条的位置
    },
    rail: {//轨道
        background: '#c3c3c3',//轨道的背景色
        opacity: 0,
        size: '6px',
        specifyBorderRadius: false,//是否指定轨道的 borderRadius， 如果不那么将会自动设置
        gutterOfEnds: null,
        gutterOfSide: '0px',//轨道距 x 和 y 轴两端的距离
        keepShow: false //是否即使 bar 不存在的情况下也保持显示
    },
    bar: {
        showDelay: 500,//在鼠标离开容器后多长时间隐藏滚动条
        onlyShowBarOnScroll: false,//当页面滚动时显示
        keepShow: false,//是否一直显示
        background: '#c3c3c3',
        opacity: 1,
        hoverStyle: false,
        specifyBorderRadius: false,
        minSize: false,
        size: '6px',
        disable: false,//是否禁用滚动条
  },// 在这里设置全局默认配置
  name: 'vuescroll' // 在这里自定义组件名字，默认是vueScroll
};

然后直接在main.js里面引入就可以了。可以直接写在main.js里面或者写一个js文件require引入。

官网说有两种写法，还有一种是Vue.use(vuescroll，{POS：{}//写参数}) 但是这种方式注册后全局参数不起作用的。暂时没找到原因